Question

我正在尝试在一个wordpress页面中嵌入一个藤蔓视频，并且在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>

Answer 1

我想你忘了发帖了？

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

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

Answer 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>

Answer 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中获取嵌入代码时，也会有一个脚本。在标题中弹出，你很高兴。

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

如何让嵌入式Vine视频动态扩展到不同的设备？

3 个答案: