嵌入YouTube IFrame响应式

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%;
}

如果这不起作用试试这个

Answer 2

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

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

这适用于我，但无论如何，here you can find more solutions的其他（具体）案件

Answer 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属性的值是必不可少的。