html 响应式iframe视频
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 响应式iframe视频相关的知识,希望对你有一定的参考价值。
REF: http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
REF2: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
<div class="video-container">
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
</iframe>
</div>
############## METHOD 1 ##################
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
############# METHOD 2 ###############
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper object,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
以上是关于html 响应式iframe视频的主要内容,如果未能解决你的问题,请参考以下文章
为响应式设计缩放 iframe 仅 CSS
css 响应式修复iframe视频
css 响应式视频iframe
仅使用 CSS 的响应式视频 iframe(保持纵横比)?
WordPress 中的响应式 iframe
css 使用iFrame的响应式YouTube和Vimeo视频 - 来自https://www.ostraining.com/blog/coding/responsive-videos/