Highlighted

Making an Iframe html code respond to window size ..

New Here ,
Jan 29, 2018

Copy link to clipboard

Copied

I have a multi breakpoints on the site (960, 1200, 1400) and I have certain sites display in an Iframe on a button click on the site using:

<iframe id="videowindow" name="videowindow" width="1280" height="465" src="https://www.cointelegraph.com" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

this displays fine on breakpoint 1400 with the scrollbar for the site inside the site, but on smaller breakpoints it doesn't shrink, this is probably because I have size : in the HTML, how do I make it so that on different breakpoints the site displayed in the Iframe will match the size of the box I set around it / put it in or fit the main site?

Can anyone help with how?

Thanks

I did not understand why in your code video attributes are used .

The correct code for your case:

<iframe width="100%" height="465" src="https://www.cointelegraph.com" frameborder="0"></iframe>

With this code, you can stretch the width of the iframe inside the Muse as you need.

Views

139

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Making an Iframe html code respond to window size ..

New Here ,
Jan 29, 2018

Copy link to clipboard

Copied

I have a multi breakpoints on the site (960, 1200, 1400) and I have certain sites display in an Iframe on a button click on the site using:

<iframe id="videowindow" name="videowindow" width="1280" height="465" src="https://www.cointelegraph.com" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

this displays fine on breakpoint 1400 with the scrollbar for the site inside the site, but on smaller breakpoints it doesn't shrink, this is probably because I have size : in the HTML, how do I make it so that on different breakpoints the site displayed in the Iframe will match the size of the box I set around it / put it in or fit the main site?

Can anyone help with how?

Thanks

I did not understand why in your code video attributes are used .

The correct code for your case:

<iframe width="100%" height="465" src="https://www.cointelegraph.com" frameborder="0"></iframe>

With this code, you can stretch the width of the iframe inside the Muse as you need.

Views

140

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 29, 2018 0
Most Valuable Participant ,
Jan 30, 2018

Copy link to clipboard

Copied

You answered your own question: Leave out the fixed sizes. That's assuming of course the code of the video provider is in itself responsive. If it isn't, you would need to dial in individual values for each breakpoint or find otehr ways to scale the video e.g. by nesting it in other constructs.

Mylenium

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 0
Guide ,
Jan 30, 2018

Copy link to clipboard

Copied

I did not understand why in your code video attributes are used .

The correct code for your case:

<iframe width="100%" height="465" src="https://www.cointelegraph.com" frameborder="0"></iframe>

With this code, you can stretch the width of the iframe inside the Muse as you need.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 1