Question

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

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

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

Answer 1

尝试这种纯粹的css方式：

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

如果不起作用，请尝试此

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

Answer 2

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

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

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

Answer 3

Web上有很多提示可以删除'width'和'height'属性，这在某些情况下是不可能的。但是用户可以使用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属性值所必需的。

Answer 4

首先，设置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>

Answer 5

我尝试过，但没有真正回应。因此，使用了以下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%;
}

Answer 6

我最终得到了这个，它将所有 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>

嵌入YouTube IFrame响应式

6 个答案: