如何让嵌入式 Vine 视频动态缩放到不同的设备？答案

【问题标题】：How can I get an embedded Vine video to scale dynamically to different devices?如何让嵌入式 Vine 视频动态缩放到不同的设备？
【发布时间】：2013-05-23 22:22:32
【问题描述】：

我正在尝试在 wordpress 页面中嵌入一个 vine 视频，并且在 iPhone 上观看时很难让视频按比例缩放。我真的没有任何运气向嵌入代码 html 明智地添加东西。但这可能是因为我是一个完全的菜鸟。

这是我想要动态扩展的代码。

<iframe class="vine-embed" src="https://vine.co/v/bVuUeLXBHBF/embed/simple" 
width="600" height="600" frameborder="0"></iframe><script async 
src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>

【问题讨论】：

标签： html iframe video scaling vine

【解决方案1】：

我想你忘记发布代码了？

<iframe src="https://vine.co/v/bnrtW52x1uJ/card?mute=1"
width="100%" height="100%" frameborder="0"></iframe>

如果那是 vine 嵌入代码，如果您当前使用像素，您可以将宽度/高度更改为百分比吗？

【讨论】：

谢谢...仍在学习如何使用它。我尝试了“100%”提示，但似乎没有解决问题。
您是否在使用或检查了 CSS 文件中的“vine-embed”类

【解决方案2】：

我今天只是在寻找答案..这对我有用：

风格

.embed-container {
    position: relative; 
    padding-bottom: 100%; 
    height: 0; 
    overflow:  hidden;
} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

HTML

<div class='embed-container'>
    <iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'></iframe>
    <script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script>
</div>

【讨论】：

【解决方案3】：

当我的网站需要响应时，也遇到了同样令人恼火的问题。摆弄宽度和高度属性以及样式对我没有任何帮助。我最终编写了一个函数来计算页面加载所需的宽度和高度，然后将 iframe 写入包含 div 元素的 innerHTML：

function setVineDimensions () {
    var dimension = document.getElementById('vine_container').offsetWidth;
    document.getElementById('vine_container').innerHTML  = '<iframe class="vine-embed" src="https://vine.co/v/XXXXXXXX/embed/simple" width="' + dimension + '" height="' + dimension + '" frameborder="0"></iframe>';
}

setVineDimensions();

请注意，以上只是 iframe。当您从 Vine 获取嵌入代码时，也会有一个脚本。在标题中弹出它，你就可以开始了。

此解决方案仅适用于页面加载/刷新。如果您倾向于调整浏览器窗口的大小，它不会改变。

【讨论】：