Skip to main content

I have an interactive video that I am trying to embed as a training material in a new course. I can insert the video through an iFrame and HTML option but the window does not resize to match the dimensions of the embedded video (800 h x 600 w). Is there an option to increase the size of the HTML training material window? 

 

 

What is the control setup of the embedded content you are putting in?

@Bfarkas Not sure what you mean by control setup. Here’s the iframe code that I’m using with the HTML training material. 

<iframe src="https://mybiteshares.com/bites/182592/timestamp=1676988080858" height="800" width="600" title="Bites Listening Empathy"></iframe>

I have the same issue.

So in the iframe source there, it is specifying the height as 800px and width as 600px, those are absolute measurements and will not be responsive. 

Getting an iframe truly responsive is a bit tricky, the simplest but not fully responsive is to change the width to 100% and then set the height to either a large number that will always be big enough, or large enough to mostly be ok and let the overflow scroll.

There are a lot of other techniques to make it fully responsive, but many rely on either javascript or being able to control CSS better.

So in the iframe source there, it is specifying the height as 800px and width as 600px, those are absolute measurements and will not be responsive. 

Getting an iframe truly responsive is a bit tricky, the simplest but not fully responsive is to change the width to 100% and then set the height to either a large number that will always be big enough, or large enough to mostly be ok and let the overflow scroll.

There are a lot of other techniques to make it fully responsive, but many rely on either javascript or being able to control CSS better.

This worked for me:

 

<div style="padding-bottom:0%; position:relative; display:block; width: 100%">
  <iframe width="100%" height="100%"
    src="https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ&start_radio=1"
    frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0">
  </iframe>
</div>

 

Reply


Terms & ConditionsCookie settings