【问题标题】:Youtube video as background for webpageYoutube 视频作为网页的背景
【发布时间】:2017-09-27 06:25:06
【问题描述】:
我需要 youtube 视频作为我网页的背景。
这是我的代码
<section class="about-section">
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/UY9V5S9MEgk?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div> </div> </section>
这工作正常。我的问题是我需要使用以下 youtube 视频作为我的背景,但它不起作用。
我尝试了这两个 URL,但都不起作用
https://youtu.be/UY9V5S9MEgk
这些是我尝试过的 URL
https://www.youtube.com/watch?v=UY9V5S9MEgk
【问题讨论】:
标签:
html
css
video
youtube
background
【解决方案1】:
试试这个:
<section class="about-section">
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/UY9V5S9MEgk" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</section>
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/UY9V5S9MEgk">
</iframe>
</body>
</html>
【解决方案2】:
试试这个:
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/UY9V5S9MEgk?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
【解决方案3】:
复制您的 youtube 视频的嵌入代码并将其替换为您当前的
<iframe width="854" height="480" src="https://www.youtube.com/embed/UY9V5S9MEgk?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
【解决方案4】:
这个问题已经解决了[点击这里][1]
如果您有任何疑问,请给我留言。
[1]: https://codepen.io/dudleystorey/pen/PZyMrd
和[点击这里][1]
[1]: https://www.labnol.org/internet/youtube-video-background/27933/