1

嵌入的视频不会调整到容器 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>

我在谷歌上找到的许多示例和说明似乎都不起作用。我试图保持代码干净。

4

1 回答 1

0

纵横比

在下面的演示中，任何带有非 Bootstrap 类的标签都被删除了（这是一个我们可以在没有 ATM 的情况下执行的变量。Bootstrap 看起来不错，有两个可能的问题：

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

    或者

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

演示

此演示中的视频为 320x240 像素，纵横比为 4:3，视频标签具有类.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>

于 2019-01-28T05:16:15.083 回答