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.
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
Compatibility This trick supports all browsers, including: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad.
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn