视频无法调整为容器div

Question

嵌入式视频的大小不会与容器div的大小相同。我已经编辑了CSS，最后使海报图像正确缩放，但是现在视频在左右两侧分别裁剪了约50像素。

我是否缺少HTML5中视频的容器？您能看看我的标记和样式吗？

       .blog-side {
      position: relative;
    }
    
    .wrapper {
      margin: 0 auto;
    } 
    
    
    .videowrapper {
      width: 100%;
      height: auto;
      text-align: center;
      overflow: hidden;
      position: relative;
    }

<section class="blog-side sp-seven blog-style-one standard-post video-post">
        <div class="container">
            <div class="row">
                <div class="col-md-9 col-sm-12 col-xs-12 content-side">
                    <div class="blog-details-content">
                        <div class="wrapper">
                            <div class="videowrapper">
                            <div class="embed-responsive embed-responsive-16by9">
                            <video class="embed-responsive-item" controls poster="images/news/orphan.png">
                            <source src="video/video1.webm" type="video/webm">
                              </video>
                                </div> 
                            </div>
                        </div>

我在Google上找到的许多示例和说明似乎无效。我正在尝试保持代码干净。

Answer 1

Aspect Ratio

在下面的演示中，删除了具有非Bootstrap类的所有标签（这是一个无需ATM即可执行的变量。Bootstrap看起来不错，有两个可能的问题：

1. 它可以是一个或多个非Bootstrap类。

   或

2. 视频的尺寸不是16：9 ex。 640x360px，1024x576等。Bootstrap类.embed-responsive-16by9要求您的视频的宽高比为16：9。

---

演示

此演示中的视频的宽高比为4：3，为320x240px，视频标签的类别为.embed-responsive-4by3

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

<main class="container">
  <section class="row">
    <section class="col-md-9 col-sm-12 col-xs-12">
      <figure class="embed-responsive embed-responsive-4by3">
        <video class="embed-responsive-item" controls>
       <source src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.ogg" type="video/ogg">
     </video>
      </figure>
    </section>
  </section>
</main>