How To Embed Responsive YouTube Video In Phone Mobile Website

First you will need to add the following to your style sheet.

CSS

123456789101112131415.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;} .video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

Next, edit add some HTML around your embed code.

HTML

1<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe</div>

Videos should be responsive and ready to view on Tablets and Mobile devices.

Leave a comment

Your email address will not be published. Required fields are marked *