Question

我正在创建一个我需要添加视频的网站。视频将使用javascript点击事件触发，视频包含iframe。

调用时的视频需要适合父div的高度和高度。我使用bootstrap布局来帮助我创建响应式布局。

我在网上跟踪了一个例子，但由于某种原因，视频不适合父div的整个宽度。我使用容器流体类和col - ** - 12网格布局。

我已经包含了一个jsfiddle链接，其中包含了我已经实现的示例。

https://jsfiddle.net/JuiceJay/rt9L69ya/6/

<div class="container-fluid remove-padding">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="vid_thumb embed-responsive embed-responsive-16by9" id="bio_vid">
            <h1> A leader in the world of photography</h1>
            <span id="play-btn"><img src = "http://www.rockinrranch.com/wp-content/themes/rockinr2013/images/play-button.png" alt = "thumb"/></span>
        </div>
    </div>
 </div>

h1{
    position: relative;
    top: 240px;
    text-align: center;
    margin: 0 auto;
    width: 70%;
    color: #FFF;
    letter-spacing: 0.2em !important;
    font-family: "Arial Black", Gadget, sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 100 !important;
    font-style: normal;
    font-size: 2em;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1); 
    -moz-transition: .2s ease-in;
    transition: .2s ease-in;
}

  `.vid_thumb{
            background-image: url('https://images3.alphacoders.com/823/thumb-1920-82317.jpg');
            background-attachment: local;
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-background-size: cover;
            -o-background-size: cover;
            -ms-background-size: cover;
            -moz-background-size: cover;
            background-size: cover;
            width: 100%;
            height: 400px !important;
            max-height: 400px !important;
            margin: 0px;
            padding: 0px;
            filter: grayscale(60%);
            -webkit-filter: grayscale(60%);
            border: 1px solid green;
        }

        .vid_thumb img{
            width: 100%;
            height: auto; 
            margin: 0 auto;
        }


        span img{
            width: 100%;
            height: 100%; 
            margin: 0 auto;
        }

        #play-btn{
            position: absolute;
            overflow: hidden;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            opacity: 0.3;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            display:none;
        }

        .vid_thumb:hover #play-btn{
            display: block;
        }

        .vid_thumb:hover h1{
            display:none;
        }

        #play-btn:hover{
            opacity: 1;
        }

  .remove-padding{
    padding: 0px !important;
  }

document.getElementById('bio_vid').addEventListener('click', function() {
    this.innerHTML = '<iframe class = "embed-responsive-item" src=   "https://www.youtube.com/watch?v=t6uSHOp2Uj0" width="100%" height="400px allowfullscreen="false">';

  if (document.getElementById('bio_vid').ended) {
      document.getElementByTagName("iframe").style.display = 'none';
   }

}）;

不知怎的，如果我使用col- -6，并将网格划分为两个，它会填充其中任何一个但不是col的宽度 - -12 ..我甚至尝试过使用bootstrap embed-responsive-16by9。

或任何关于放弃boostrap并实施全新且更简单的方法的帮助。

我还想知道如何使用javascript通过iframe检测视频的结尾。

如何使用bootstrap创建响应式视频布局？

0 个答案: