HTML5 practice-code sharing for flexible video using CSS

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 video tag of html5 work well, but this solution does not work for iframe or inline code of object tag. After hours of searching and experimenting, I finally found the solution. This css trick comes in handy when you are doing responsive design. You can visit the final demo address and zoom your browser to see the effect.

Flexible html5 video tag (demo)

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 technique is quite simple. You need to add a

container for the video, and add the padding of p- The bottomproperty value is set 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

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

Implementing flexibility under fixed width

If restricted The width of the video, then we need an additional

container to wrap the video, and set a fixed width and max-width:100% for p.

　CSS

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

　HTML

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

　Compatibility

　This technique supports all browsers, Includes: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad.

The above is the detailed content of HTML5 practice-code sharing for flexible video using CSS. For more information, please follow other related articles on the PHP Chinese website!