Prestashop 的响应式视频 Youtube答案

【问题标题】：Responsive Video Youtube for PrestashopPrestashop 的响应式视频 Youtube
【发布时间】：2015-12-15 19:41:34
【问题描述】：

我在 Prestashop 中包含视频时遇到问题！

这是我用来包含视频的代码：

<div class="videoWrapper">
 <iframe width="640" height="360" src="https://www.youtube.com/embed/3G1PFLuTrgM" frameborder="0" allowfullscreen></iframe>
</div>

还有 CSS：

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: auto  !important;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

但是根本不工作！

有人知道我能做什么吗？

谢谢！

【问题讨论】：

它对我有用。无论如何，您应该尝试使用 Bootstrap 实用程序：getbootstrap.com/components/#responsive-embed
你绝对应该寻找 fitVid.js 库 :)

标签： html iframe youtube prestashop

【解决方案1】：

更改默认的内联宽度和高度：

<div class="videoWrapper col-md-12">
 <iframe width="100%" height="450" src="https://www.youtube.com/embed/3G1PFLuTrgM" frameborder="0" allowfullscreen></iframe>
</div>

使用 Bootstrap 非常有用且简单，尝试使用 CSS 为 iframe 添加高度（或保持默认）

【讨论】：