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