css Youtube响应
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Youtube响应相关的知识,希望对你有一定的参考价值。
//wrap youtube content with flex-video foundation
$('iframe[src*="youtube.com"]').each(function () {
var vT = $(this);
vT.wrap('<div class="flex-video widescreen">');
if (typeof vT.attr('src') != 'undefined') {
var iSrc = vT.attr('src');
if (iSrc.indexOf('youtube') >= 0) {
iSrc = iSrc.replace('wmode=Opaque', 'x=x').replace('autoplay=1', 'autoplay=0');
if (iSrc.indexOf('?') >= 0) {
var fixed_src = iSrc + '&wmode=transparent&showinfo=0&rel=0';
vT.attr('src', fixed_src);
} else {
var fixed_src = iSrc + '?wmode=transparent&showinfo=0&rel=0';
vT.attr('src', fixed_src);
}
}
}
});
.flex-video {
position: relative;
padding-top: 1.5625rem;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 1rem;
overflow: hidden; }
.flex-video.widescreen {
padding-bottom: 56.34%; }
.flex-video.vimeo {
padding-top: 0; }
.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
以上是关于css Youtube响应的主要内容,如果未能解决你的问题,请参考以下文章
css iframe / youtube / video的响应式CSS
css 只有CSS响应的YouTube / Vimeo嵌入式
css 响应iframes vzw。 YouTube视频
css Youtube响应
css 响应youtube视频
css 响应Youtube