Responsive Video embed from Youtube and Vimeo

Here is an example for responsive video embed, try to shrink your browser width smaller then this video below and you’ll see how this video is displayed on a smaller screen.

First of all wrap the video embed code with a’div’and specify a 50% to 60% padding bottom. Then, name and specify the child elements i.e ‘iframe’, ‘object’, ‘embed’ as having 100% width, 100% height, with absolute position. This forces all the embed elements to expand to full-width automatically!

HTML code to embed a responsive video:

<div class="video-container">
Here is video embed code of Youtube or Vimeo
</div>

StyleSheet for Responsive Video

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

Example for Responsive Video

Share this :

Comments are closed.

Related post

Free Responsive Website templates

ThemeVina is Best site for free sharing and download Wordpress themes, Joomla templates, Responsive website templates and more HTML templates.

All template in Site are free. You can download and install for your site.

Contact us

  • Brand: Theme Vina
  • Email: admin@themevina.com
  • Website: www.themevina.com
  • Address: 367 Tran Hung Dao Street
  • Location: Thai Binh City, Thai Binh, Viet Nam

Newsletter