嵌入 YouTube IFrame 响应式答案

【问题标题】：Embed YouTube IFrame responsive嵌入 YouTube IFrame 响应式
【发布时间】：2015-10-08 18:23:31
【问题描述】：

我在 Magento 网站上嵌入了带有以下链接的 YouTube 视频（除非有我不知道的插件，否则 Magento 并不重要）

<iframe width="640" height="360" src="http://www.youtube.com/embed/Zq-805aUM7M?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

我不认为这段代码很好，因为它没有响应。我该如何解决？

【问题讨论】：

只是一个建议：getbootstrap.com/components/#responsive-embed 你只需要响应式嵌入 css。

标签： html responsive-design youtube

【解决方案1】：

试试这种纯粹的css方式：

iframe, object, embed {
        max-width: 100%;
        max-height: 100%;
}

如果这不起作用，试试这个

https://benmarshall.me/responsive-iframes/

【讨论】：

我会尝试的，请注意我仍然希望它默认以宽度=“640”高度=“360”的大小开始
（注）如果在Wordpress帖子中使用，您可以使用.entry-content iframe, .entry-content object, .entry-content embed在单个帖子中仅替换这些标签。

【解决方案2】：

要专门定位 youtube 视频，而不是所有 iframe 或嵌入对象，您可以使用基于 src 中存在的字符串的属性选择器。

iframe[src*=youtube]
{
  max-width:100%;
  height:100%;
}

这对我有用，但无论如何，here you can find more solutions 用于其他（特定）案例

【讨论】：

【解决方案3】：

网络上有很多提示建议删除“宽度”和“高度”属性，这在某些情况下是不可能的。但是用户可以用 CSS 覆盖这些属性

.wrapper {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%; }

还有 iframe：

.wrapper iframe[width][height] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; }

注意 CSS 选择器中的 [width] 和 [height] 以及 "!important" 指令 - 这些对于覆盖 iframe 的 width 和 height 属性值是必不可少的。

【讨论】：

【解决方案4】：

我尝试过，但没有真正响应。所以使用了下面的 iframe & CSS

HTML:

    <iframe class="video-container"  src="https://www.youtube.com/embed/-H2mmm5pMmY" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


CSS:
.video-container {
position:relative;
height:22em;
width:-webkit-fill-available;
overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position:relative;
top:0;
left:0;
width:100%;
height:100%;
}

【讨论】：

【解决方案5】：

我最终得到了这个，它将所有 iframe 元素变成 16:9：

<style>
.youtube-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<iframe src="https://www.youtube.com/watch?v=oTLZci5dp44"></iframe>

<script>
$('iframe[src*="youtube"]').wrap('<div class="youtube-container"></div>');
</script>

【讨论】：

【解决方案6】：

我认为这是最好的方法

.youtube-video {
  width: 100%;
  aspect-ratio: 16/9;
}

&lt;iframe class="youtube-video" src="&lt;YOUR_YOUTUBE_VIDEO_URL&gt;" frameborder="0"&gt;&lt;/iframe&gt;

还要检查here 以了解aspect-ratio 的浏览器兼容性

【讨论】：

【解决方案7】：

首先，设置 iframe 的宽度和高度以匹配您的比例 - 对我来说是 16by9：

<figure>
    <iframe class="youtube-video" width="640" height="360" src="..." allowfullscreen></iframe>
</figure>
<script>
    $(function(){
        var
            $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed")
            ,$fluidEl = $("figure")
        ;
        $allVideos.each(function() {
            $(this).attr('data-aspectRatio', this.height / this.width).removeAttr('height').removeAttr('width');
        });
        $(window).resize(function(){
            var newWidth = $fluidEl.width();
            $allVideos.each(function(){
                var $el = $(this);
                $el.width(newWidth).height(newWidth * $el.attr('data-aspectRatio'));
            });
        }).resize();
    });
</script>

Bootstrap 4 所有者（可能更低）更幸运：

<figure class="embed-responsive embed-responsive-16by9">
    <iframe class="youtube-video" width="640" height="360" src="..." allowfullscreen></iframe>
</figure>

【讨论】：