Comment: When I encoded Elemin Theme (a responsive site I designed recently), one of the frame skips I encountered was how to make embedded videos more flexible in size changes; through hours of searching for data and experiments, I finally found a solution
When I encoded Elemin Theme (a responsive site I designed recently), one of the frame skips I encountered was how to make embedded videos more flexible in size changes. Using max-width:100% and height:auto can make the html5 video tag work well, but this solution does not work with inline code for iframe or object tags. After several hours of searching for data and experiments, I finally found a solution. This CSS technique comes in handy when you are doing responsive design.
Flexible html5 video tag
Using html5's video, you can make it flexible by setting max-width:100%. In the previous introduction, it has been mentioned that it is not applicable to commonly used iframes and embedded codes in objects.
video {
max-width: 100%;
height: auto;
}
Flexible Object & Iframe embedded videos
This trick is quite simple, you need to add a <div> container to the video and set the padding-bottom property value of the div between 50% and 60%. Then set the width and height of the child element (ifame or object) to 100%, and use absolute positioning. This forces the embedded object to automatically expand to 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>
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" frameborder="0"></iframe>
</div>
Achieve flexibility at fixed width
If the video width is limited, then we need an extra <div> container to wrap the video and set a fixed width and max-width:100% for the div.
CSS
.video-wrapper {
width: 600px;
max-width: 100%;
}
HTML
<div>
<div>
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" frameborder="0"></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
compatibility
This trick supports all browsers, including: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad.