如何在不使用div的情况下使iframe响应？

我这个职位（Making an iframe responsive），通过将一个容器周围的iframe类，例如使响应iframe中了解到，如何在不使用div的情况下使iframe响应？

<div class="intrinsic-container"> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe> 
</div>

是否有可能嵌入<iframe>...</iframe>直接在我的职位（不使用<div>...</div> ）？我尝试了这些解决方案，但都不起作用。

PS：我用两列布局的WordPress。视频的比例可以是16：9（来自YouTube），4：3（来自腾讯）等。这是一个临时的demo。

来源

2017-02-27 SparkAndShine

如果您可以使用不带额外包装元素的可视工作单元。

全幅：

iframe { 
 
    width: 100vw; 
 
    height: 56.25vw; /*16:9*/ 
 
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>

半页面宽度：

iframe { 
 
    width: 50vw; 
 
    height: 28.125vw; /*16:9*/ 
 
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>

来源

2017-02-27 19:33:16 Stickers

我在WordPress中使用两列布局。所以，我需要将宽度设置为（100vw - 边栏的宽度）？但是桌面和移动平台上的侧栏显示不同。这是[demo]（http://sparkandshine.net/en/a-three-minutes-short-film-dejeuner-du-matin-breakfast/）。 – SparkAndShine

另一个问题：视频比例并不总是16：9。来自其他平台的某些视频默认为“width =”640“height =”498“'（比例为4：3）。 – SparkAndShine

@sparkandshine是否要将#primary和#secondary都转换为vw，并对iframe的大小进行calc计算，或者只要使用div来包装它就更容易了。对于16：9和4：3的比例，听起来就像使用类的包装是最简单的方法。 – Stickers

-1

使用引导类来使iframe响应。

<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" allowfullscreen 
      src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" > 
    </iframe> 
</div>

来源

2017-02-27 19:24:14

使用引导这就像拿大锤来破解一个螺母 – Mattonit

这里的关键是高度和宽度比你想保持。我冒昧地使用jQuery而不是javascript来做到这一点。代码在点击按钮时触发。它计算iframe的宽度和高度比例，并根据您的需要进行调整（在这种情况下，我假设您希望它填充容器宽度）。

如果您在一个页面上有多个视图并在窗口调整大小和页面加载时运行代码，则您可能需要遍历所有视频。

这里是JSFiddle

希望它能帮助:)

HTML

<iframe id="iframe" width="640" height="360" src="https://www.youtube.com/embed/4SDVkdcO8ts" frameborder="0" allowfullscreen></iframe> 
<button id="button" style="float: left">Click me!</button>

jQuery的

$(document).ready(function(){ 
    $("button").click(function(){ 
    var ratio = $("#iframe").height()/$("#iframe").width(); 
    $("#iframe").width("100%"); 
    var newWidth = $("#iframe").width(); 
    $("#iframe").width(newWidth); 
    $("#iframe").height(newWidth*ratio); 
    $("button").text("resize the window and click me again!"); 
    }); 
});

来源

2017-02-27 20:29:18 RMo

如何在不使用div的情况下使iframe响应？

回答

相关问题