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 + '&amp;wmode=transparent&amp;showinfo=0&amp;rel=0';
                    vT.attr('src', fixed_src);
                } else {
                    var fixed_src = iSrc + '?wmode=transparent&amp;showinfo=0&amp;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