极客教程在Bootstrap中嵌入响应式视频或幻灯片并举例说明
Bootstrap允许根据显示屏或父元素的宽度创建响应式视频或幻灯片嵌入，创建的原生比率会随着设备的变化而变化。使用响应式视频或幻灯片嵌入，内容可以根据屏幕大小或父容器元素自动缩放，这使得UI更加响应。
Bootstrap提供了一个名为embed-responsive的类来创建响应式嵌入。这个类被分配给包含以下任何嵌入元素的父类。<iframe>、<embed>、<video>、和<object>。
可选的是，与embed-responsive类一起，还有一个embed-responsive-item类可以与嵌入元素一起使用。
Bootstrap还提供了一些修改器类来调整元素的长宽比。
- embed-responsive-16by9
- embed-responsive-21by9
- embed-responsive-1by1
- embed-responsive-4by3
下面的程序说明了embed-responsive类。
<!DOCTYPE html>
<html>
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>
Responsive Video
</title>
</head>
<body>
<div class="embed-responsive
embed-responsive-21by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/HMAwoMt3kek"
allowfullscreen>
</iframe>
</div>
</body>
</html>
输出 :
