0

我正在尝试在 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>
4

3 回答 3

1

我想你忘记发布代码了？

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

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

于 2013-05-23T22:28:25.433 回答
0

当我的网站需要响应时，也遇到了同样令人恼火的问题。摆弄宽度和高度属性以及样式对我没有任何帮助。我最终编写了一个函数来计算页面加载所需的宽度和高度，然后将 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 获取嵌入代码时，也会有一个脚本。在标题中弹出它，你很高兴。

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

于 2014-10-09T16:12:08.633 回答
0

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

风格

.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>
于 2014-06-12T18:01:48.450 回答