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;
}

输出：