Question

我想在我的youtube iframe后面放一张图片。图像将作为youtube窗口周围的可视框架。我尝试过不同的方法，但要么两个元素放在一起，要么iframe相对于浏览器的窗口大小。这两个元素都将放在一张桌子中。我希望youtube窗口位于背景图像的中心，没有任何东西可以将两个元素分开（比如更改浏览器的窗口大小等）。此外，为视频设置自定义预览图片会非常好而不是youtube窗口，直到它被点击（并可能在观看youtube视频时将自定义图片放回原位）。

Answer 1

在您的Youtube background-image后面设置iframe，并使用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;
}

Answer 2

您是否已尝试将youtube-iframe放入容器中并将图像设置为此容器的背景图像？像这样：

<div class="youtube">
 <-- youtube iframe or target here -->
</div>

和css：

div.youtube {
 background: url('url-of-your-image.png')
 padding: 50px; // adjust as needed
}

如何将图像放在嵌入式youtube iframe后面

2 个答案:

尝试 - DEMO