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

Question

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

我正在一个 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

使用位置：绝对； rule 在视频中，在图片中相对位置，然后在视频中播放右上角的位置

CSS 示例

div.videodiv {
    right: 0px;
    top:0px;
    z-index: 999;
    position: absolute
} 

img{
position: relative;
z-index: 998;
}

Answer 2

其实最好把图片设置为背景，然后把视频对齐到你想要的地方，像这样：

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
}

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

Place a div containing video over a jpeg

css