Use CSS to implement html5 elastic videos

Comments: When I code Elemin Theme (a responsive site I recently designed), one of the hops I encounter is, how can we make embedded videos more flexible in terms of size changes? after several hours of searching for materials and experiments, I finally found a solution.

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.

Flexible html5 video tags
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.

The Code is as follows:
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

The Code is as follows:
. 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

The Code is as follows:
<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

The Code is as follows:
. Video-wrapper {
Width: 600px;
Max-width: 100%;
}

HTML

The Code is as follows:
<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.