如何制作完整部分的 youtube 视频背景封面

Posted 2023-02-23

【中文标题】如何制作完整部分的 youtube 视频背景封面

【英文标题】：How to make youtube video background cover in full section

【发布时间】：2020-03-27 18:26:35

【问题描述】：

我正在制作一个带有 Youtube 视频背景的部分，到目前为止视频工作正常，但我发现没有办法让视频背景覆盖整个部分，对于任何屏幕尺寸的视图，背景都不应该看到视频之间的黑边，如附图所示，如何通过扩展视频不改变部分的高度来摆脱那些黑边？谁能减轻我如何处理下面的代码？

#story .videoBg 
    position: relative;
    height: 700px;


#story .videoFg, #story .videoBg iframe 
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -99;


#story .overlay 
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;


.videoBg .subTxt  
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    color: #FFF;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
    z-index: 2;



<section id="story" class="main story">
    <div>
        <div class="videoBg text-center">
            <div class="videoFg">
                <iframe src="https://www.youtube.com/embed/ab0TSkLe-E0?version=3&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;autoplay=1&amp;loop=1&amp;mute=1&amp;playlist=ab0TSkLe-E0" frameborder="0" allowfullscreen=""></iframe>
            </div>
            <div class="subTxt text">
                <h3>Origin Story</h3>
                <p></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="spacer_md"></div>
<p><a class="play no-button" style="display:unset;" href="https://www.youtube.com/embed/2L515SmPbRw?autoplay=1&amp;rel=0">Watch video</a></p>
<p></p>
            </div>
            <div class="overlay"></div>
        </div>
    </div>
</section>

【问题讨论】：

我认为你应该参考这段代码。 codepen.io/dudleystorey/pen/PZyMrd

@MeghnaBhuptani，是的，我做到了，那个是全屏封面，但我想要的只是限制在该部分中

【参考方案1】：

试试这个替换#story .videoFg, #story .videoBg iframe

#story .videoFg
 overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;

#story .videoBg iframe 
      left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;

【参考方案2】：

你可以通过添加下面的css来实现它

* padding:0;margin:0;box-sizing:border-box;

.videoFg 
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0 !important;

.videoFg iframe 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

参考号：disabling blackbars on youtube embed iFrame

#story .videoBg 
    position: relative;
    height: 700px;


#story .videoFg, #story .videoBg iframe 
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -99;


#story .overlay 
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;


.videoBg .subTxt  
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    color: #FFF;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
    z-index: 2;


/* FROM HERE */
* padding:0;margin:0;box-sizing:border-box;
.videoFg 
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0 !important;

.videoFg iframe 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

<section id="story" class="main story">
    <div>
        <div class="videoBg text-center">
            <div class="videoFg">
                <iframe src="https://www.youtube.com/embed/ab0TSkLe-E0?version=3&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;autoplay=1&amp;loop=1&amp;mute=1&amp;playlist=ab0TSkLe-E0" frameborder="0" allowfullscreen=""></iframe>
            </div>
            <div class="subTxt text">
                <h3>Origin Story</h3>
                <p></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="spacer_md"></div>
<p><a class="play no-button" style="display:unset;" href="https://www.youtube.com/embed/2L515SmPbRw?autoplay=1&amp;rel=0">Watch video</a></p>
<p></p>
            </div>
            <div class="overlay"></div>
        </div>
    </div>
</section>