Using CSS to implement elastic video html5 case practice_html5 tutorial skills

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.

Copy code

The code is as follows:

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

Copy code

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

Copy the code

The code is as follows:

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

Copy code

The code is as follows:

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

HTML

Copy Code

The code is as follows:

Compatibility
This trick supports all browsers, including: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad.