Question

我尝试使用bootstrap将Youtube视频嵌入到网页中，但我希望它能占用网页的整个宽度。

<iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>

.youtube{ width:100%; }

JS小提琴是here。

但我有两个问题：

当网页较大时，视频预览会被高度截断（您只能看到视频预览的一半）。
视频播放时，它仍然是小格式。

如何使用Bootstrap修复此问题？

Answer 1

在Bootstrap v3中，此构造将执行全宽iframe：

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/H_CN8W_uCys?wmode=transparent&amp;rel=0&amp;showinfo=0" allowfullscreen=""></iframe>
</div>

Answer 2

通过理解宽高比，这实际上可以通过纯CSS解决。代码很简单，只需用以下代码替换select t1.val,t2.val from tbl t1 join tbl t2 on t2.val-t1.val<=0.5 and t1.val<t2.val选择器：

.youtube

这将YouTube iframe的父级设置为100％宽度，宽高比为16/9，使用0高度，填充顶部为56.25％。然后你只需要将iframe填充为父级，这是通过绝对定位和高度和宽度100％实现的。

Answer 3

我知道这看起来很愚蠢，但我受到Bootstrap官方网页上检查代码的启发：

＆＃13;

.embed-responsive{
  position: relative;
  padding-top: 56.25%;
}
.youtube{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  
}

＆＃13;

56.25％ - 这是比例，你知道，16：9等;）

Answer 4

您需要添加课程HTML而不是click()。

试试这段代码：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[@class='search-result__actions--primary button-secondary-medium m5' and contains(.,'Connect')]"))).click()

在Bootstrap中嵌入视频占据整个屏幕宽度？

4 个答案: