When I was coding Elemin Theme (a responsive site I recently designed), a frame skip 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 for iframe or object tag inline code. After hours of searching and experimenting, I finally found the solution. This css trick comes in handy when you are doing responsive design.
Flexible html5 video tag
Using html5 video, you can make it flexible by setting max-width:100%. In the previous introduction, it has been mentioned that it is not suitable for embedded codes in commonly used iframes and objects.
video {
max-width: 100%;
height: auto;
}
Flexible Object & Iframe Embedded Video This trick is quite simple, you need to add A
container, and set the padding-bottom attribute 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 will force the embedded object to automatically expand to its maximum size.
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
Flexibility under fixed width If the width of the video is limited, then we need an additional
container to wrap the video and set a fixed width for the div and max-width:100%.
CSS
.video-wrapper {
width: 600px;
max-width: 100%;
}
HTML
