javascript - mb_YTPlayer - 无法在 div 中插入 YouTube 视频

Question

我试图在 Div 中嵌入 Youtube 视频，但该视频出现在 Div 之外。

我正在使用一个名为 mb YTPlayer 的库来执行此操作。

我的网站demo :

我想把视频放在红色背景的div中。

我的代码:

CSS:

.screen{
   background-image: url('img/window.png');
   width: 950px;
   height:390px;
   margin:auto;
}

.videoprom{
   padding-top:91px;
   padding-left:5px;
}

.videoprom span{
    display:block;
    width:940px;
    height:390px;
    background-color:red;
}

我的 HTML:

<div class="screen">
<div class="videoprom">
<span class="test">
<a id="video" class="player" data-property=
  "{videoURL:'https://www.youtube.com/watch?v=vLUNWYt3q1w',containment:'.test',autoplay:true, mute:true, startAt:015, stopAt:110, opacity:5}"></a></span>
</div>
</div>

我该如何解决？谢谢。

Answer 1

给div添加相对定位以适应容器，然后调整padding或margin。

.screen {
    background-image: url("img/window.png");
    height: 390px;
    margin: auto;
    position: relative;
    width: 950px;
}

#wrapper_mbYTP_video {
   margin-top: 90px;
}

输出: