Making embedded iframe content responsive 
Author: Paul W.
Visited 3846,
Followers 1,
Shared 0
When I embed video in x5 using iframe with the set width attribute some of the iframe disappears on the smaller screens. Everything else is responsive except the video. Is there a setting? A code?
Help please.
Thank you
Paul
Posted on the
Hello Paul,
To do this you would need to place the iframe holding the video within its own responsive container.
Here is an example, using the video currently embedded in your homepage at https://jpw.ca - all the code below should be inserted in the same HTML Code Object.
HTML Code tab:
<div class="responsive-container">
<iframe src="https://www.youtube.com/embed/-3aoHMROojA?rel=0" width="560" height="315" allowfullscreen>
</iframe>
</div>
Expert tab (CSS Code):
.responsive-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.responsive-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I also recommend enabling 'Automatic Height' in the HTML Code Object properties, as well as deselecting the checkbox marked 'Show scrollbars'.
Kind regards,
Paul
Author
Hi Paul,
Thank you for getting back to me.
How do I set the responsiveness so that the videos retain their height and width ratio?
You can change this segment of the iframe HTML from:
width="560" height="315"
to:
width:100% height:100%
Is that what you mean, Paul... is that the effect you would like to achieve?
NB: you will probably need to refresh your browser/clear the cache to see the difference...
Author
Is there a code to the spacific ratio of a video 16:9 appplied to the video settings width="560" height="315"
so that it adjusts like everything else does to screen size?
Please have a look at the following article, Paul:
https://benmarshall.me/resize-videos-proportionally-intrinsic-ratios/
It lists more sophisticated code which I think might be what you're after.
Author
Hi Paul
I used the code on the page and as you can see, it works https://www.jpw.ca/
I put the css code under expert on each page that has a video
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
And then the individual html code for each video.
<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/-3aoHMROojA?rel=0" width="560" height="349" allowfullscreen=">
</iframe>
</div>
Is there a place I could put the css code once so it would apply to all videos on the site?
Paul
You could insert it in Step 4 Advanced Settings >Statistics, SEO and Code > Expert tab > Custom Code > Before closing the HEAD tag.
Put it between tags as follows:
<style type="text/css">
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
However, I should qualify that by saying that whilst this will function, the original method is superior. It is best to keep your CSS in external stylesheets if possible, and always advantageous to have your pages as lightweight as possible, especially when it comes to code in the head section.
Author
Thank you very much