With all these handheld devices coming in to the market, it became obvious for us to design websites and web applications responsive to their devices. Same thing happen to me also. Few days back I came across this problem. I was working on a RWD website where client need a youtube video to embed. Since the website is responsive I wanted the Youtube video to resize depending on the size of the browser, otherwise it is of no use people using handheld devices can't view that video. When I embedded that video in my page it was with fixed width and height, so it was perfect in desktop and laptops. But when I look at my smartphone......disappointment.
Little bit of research and simple CSS, thats it I was smiling with a solution. Yes, just CSS no need of responsive embedding code that many of the developers are wondering for. Only thing you have to do is wrap the youtube iframe into a div and treat the iframe and the child elements object etc. as that wrapper div's child element and style them.
Use following CSS:
.wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.wrapper iframe, .wrapper object, .wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Use following HTML for the youtube embed code.
<div class="wrapper">
<iframe width="560" height="315" src="//www.youtube.com/embed/Lp6n5JWuAcg" frameborder="0" allowfullscreen></iframe>
</div>
Sorry I cant embed the video here as this blog itself is not responsive. Try the above code and comment. Now your videos should be responsive, and ready to view on Smart Phones, Tablets and Mobile devices.
Share Your Solutions
Share Your Solutions
