Skip to main content
Question

Increase size of HTML page/window

  • February 21, 2023
  • 5 replies
  • 149 views
B
Contributor I
Forum|alt.badge.img

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? 

 

 

Bfarkas
Hero III
Forum|alt.badge.img+5
  • Bfarkas
  • Hero III
  • February 21, 2023

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

B
Contributor I
Forum|alt.badge.img

@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>

D

I have the same issue.

Bfarkas
Hero III
Forum|alt.badge.img+5
  • Bfarkas
  • Hero III
  • April 13, 2023

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.

dandre
Novice III
  • dandre
  • Novice III
  • November 14, 2024
Bfarkas wrote:

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


Most helpful members this week

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings