HTML5 practice-using CSS for Elastic video

Document directory

• Flexibility with fixed width
• Compatibility

Reprinted please indicate the original address: http://www.cnblogs.com/softlover/archive/2012/11/25/2787558.html

 

When I code elemin theme (a responsive site I recently designed), one of the hops I encounter is how to make embedded videos more flexible in terms of size changes. Using max-width: 100% and Height: auto can make HTML5 video labels work well, but this solution does not apply to embedded code of IFRAME or object labels. After several hours of searching for materials and experiments, I finally found a solution. This CSS technique can be used when you are designing a responsive design. You can access the final demo address and zoom in and out your browser to view the effect.

 

Demo view Address: http://webdesignerwall.com/demo/elastic-videos

 

Flexible HTML5 video tag (DEMO)

With HTML5 video, you can set Max-width: 100% to make it flexible. As mentioned above, it is not applicable to embedded code in common IFRAME and object.

video {    max-width: 100%;    height: auto;}

 

Flexible embedded video of object & IFRAME

This technique is quite simple. You need to add a <div> container for video and set the padding-bottom attribute value of Div to 50% to 60%. Set the width and height of the sub-element (ifame or object) to 100%, and use absolute positioning. This will force the embedded object to automatically expand to the maximum.

　　 CSS

.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%;}

 

　　 Html

<div class="video-container">    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe></div>

 

Flexibility with fixed width

If the video width is limited, we need an additional <div> container to wrap the video and set the fixed width and max-width: 100% for the div.

　　 CSS

.video-wrapper {    width: 600px;    max-width: 100%;}

 

　　 Html

<div class="video-wrapper">    <div class="video-container">        <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>    </div>    <!-- /video --></div><!-- /video-wrapper -->

 

Compatibility

This tip supports all browsers, including chrome, Safari, Firefox, Internet Explorer, opera, iPhone, and iPad.

 

Address: http://webdesignerwall.com/tutorials/css-elastic-videos

 

HTML5 practice series