用带有 css 的 youtube 视频替换图像

【问题标题】：Replace an image with a youtube video with css用带有 css 的 youtube 视频替换图像
【发布时间】：2015-01-05 11:45:37
【问题描述】：

我正在使用模板网站。我想用 youtube 视频替换现有图像。我知道如何从 youtube 获取代码以匹配图像尺寸，但我不知道要在模板中更改什么。

这是来自 css 的代码...

.section-1 { background: url(../img/left-box-1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 600px; position: relative; }

以及html中对应的部分...

<div class="col-md-8 section-1 nopadding" id="work">
                <div class="logo-1 wp1"></div>
            </div>

【问题讨论】：

标签： html css image replace youtube

【解决方案1】：

<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://dygraphs.com/dygraph-dev.js"></script>
<style>
.section-1 { background: url(../img/left-box-1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 600px; position: relative; }
</style>
</head>
<body>
<div class="col-md-8 section-1 nopadding" id="work">
    <div class="logo-1 wp1">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/8dKLp2KB8u4" frameborder="0" allowfullscreen>
        </iframe>
    </div>
</div>
<script>

</script>
</body>
</html>

【讨论】：

酷！谢谢，我做到了。我将 iframe 添加到 div 类“col-md-8 section-1”而不是“logo-1 wp1”中，这样就成功了！然后我进入 CSS 并将其从 background: (url...) 更改为 background-color: black;
哦，是的，而且我没有使用头脑中的脚本。感谢您的帮助！