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

【问题标题】：How to put image behind embedded youtube iframe如何将图像放在嵌入式 youtube iframe 后面
【发布时间】：2014-08-30 13:06:30
【问题描述】：

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

【问题讨论】：

标签： html iframe youtube position

【解决方案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;
}

【讨论】：

你知道我将如何在 react.js 中实现这一点吗？

【解决方案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
}

【讨论】：