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