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

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

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

Answer 2

使用position：absolute;在视频中统治并在图像中相对位置，然后在视频中右上角和右上角进行播放

CSS示例

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

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

将包含视频的div放在jpeg上

2 个答案: