css - 在 jpeg 上放置一个包含视频的 div

Question

我是编码的 super 新手，如果这让任何人感到沮丧，我深表歉意!

我正在一个 Wordpress 网站上工作，我正在尝试在 jpeg 上放置一个视频(实际上是一个简码)，就像这样；

http://imagizer.imageshack.us/v2/617x176q90/540/OJCIR1.jpg

然后在灰色区域放置一个视频缩略图(点击时打开灯箱)。这是我的 HTML:

<div style="width: 640px; height: 480px;">
    <img src=".../uploads/2015/01/watch.jpg" style="z-index:-1" />
    <div class="videodiv">[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" auto_thumb="1"]
    </div>
</div>

这是我的 CSS:

div.videodiv {
    float: right;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1;
}  

我敢肯定，您可以看出我是从网上找到的提示中粗暴地提取这段代码。

非常感谢任何帮助，以及如何将代码插入这些主题？!

对不起!

Answer 1

实际上，最好将图像设置为背景，然后将视频对齐到您想要的位置，如下所示:

HTML

<div class="wrapper">
    <div class="videodiv">[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" auto_thumb="1"]
    </div>
</div>

CSS

div.wrapper {
    width: 640px; //Change it to image's width
    height: 480px; //change it to image's height
    background: url(.../uploads/2015/01/watch.jpg) #fff;
}  

div.videodiv {
    right: 20px; //distance from right border to gray rectangle border 
    top: 10px; //distance from top border to gray rectangle top border
    position: absolute; //let total control of the position of the video
}