html - 如何将图像放在嵌入式 YouTube iframe 后面

Question

我想在我的 YouTube iframe 后面放置一个图像。该图像将充当 YouTube 窗口周围的视觉框架。我尝试过不同的方法，但要么两个元素相继放置，要么 iframe 相对于浏览器窗口大小定位。这两个元素都将位于一个表中。我希望 YouTube 窗口位于背景图像的中心，并且没有任何东西可以将两个元素分开(例如更改浏览器的窗口大小等)。此外，为视频提供自定义预览图片会非常好而不是 YouTube 窗口，直到它被点击(并且可能在观看 YouTube 视频后将自定义图片放回原位)。

Answer 1

在 Youtube iframe 后面设置 background-image 并使用 JavaScript 来自定义预览图片。

尝试 - DEMO

HTML:

<div id="background-video">
    <div onclick="play();" id="vidwrap"></div>
</div>

<!-- <iframe width="480" height="360" src="[YouTube Video URL]?autoplay=1" frameborder="0"> -->

<script type="text/javascript">function play(){document.getElementById('vidwrap').innerHTML = '<iframe width="480" height="360" src="http://www.youtube.com/embed/7-7knsP2n5w?autoplay=1" frameborder="0"></iframe>';}</script>

CSS:

#background-video {

    /* Your background image */

    background-image: url('http://placehold.it/580x460');

    background-repeat: no-repeat;
    padding: 50px;
}

#vidwrap {

    /* Your thumbnail image */

    background: url('http://www.edu.uwo.ca/img/click_to_play.png') no-repeat center;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow:hidden;
    background-repeat: no-repeat;
    width:480px;
    height:360px;
    cursor:pointer;
}