一段背景图可点击弹出层播放 Youtube 视频的代码

来源：互联网
2025-11-11 11:01:24
0

我们做外贸独立站时，主页或其它介绍页有可能会需要弹出视频并播放，背景图可以随时替换。有些模板会写好这些代码，如果 Wordpress 的页面构建器没有这个功能，购买的模板也没有，那么我们就要创建布局，并且自己添加背景图可点击弹出层播放 Youtube 视频的代码。

以下分享这块的完整前端代码，有一点点小不足，一伙会讲明：

加入CSS样式：

.container-video{display:flex;}.video-background{width:476px;height:506px;background-image:url("https://替换为你背景图片的地址");background-size:cover;display:flex;justify-content:center;align-items:center;cursor:pointer;}@media(max-width:1100px){.video-background{width:320px;height:300px;background-size:cover;background-position:center;}}@media(max-width:768px){.container-video{display:flex;justify-content:center;}.video-background{width:300px;height:300px;background-size:cover;background-position:center;}}.play-icon{width:0;height:0;border-top:15pxsolidtransparent;border-bottom:15pxsolidtransparent;border-left:25pxsolidwhite;position:relative;cursor:pointer;z-index:2;}.play-icon::before{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;border-radius:50%;border:2pxsolidwhite;background:rgba(0,0,0,0);z-index:1;transform:translate(-80%,-50%);}.video-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:9999;}.video-popup.open{display:block;opacity:1;}.video-content{width:60%;height:70%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:1%;box-sizing:border-box;}@media(max-width:768px){.video-content{width:90%;height:auto;padding:10px;}}iframe{width:100%;height:100%;}.close-btn{font-size:24px;position:absolute;top:20px;right:20px;cursor:pointer;z-index:10000;color:#fff;}

<pclass="container-video"><pclass="video-column"><pclass="video-background"onclick="openVideoPopup('这里填入Youtube视频地址ID')"><pclass="play-icon"></p></p></p></p><pid="videoPopup"class="video-popup"><pclass="video-content"><spanclass="close-btn"onclick="closeVideoPopup()">×</span><iframeid="***Video"width="853"height="480"src=""frameborder="0"allowfullscreen></iframe></p></p>

<script>functionopenVideoPopup(videoId){varpopup=document.getElementById('videoPopup');popup.classList.add('open');setTimeout(function(){varembedUrl='https://www.***.com/embed/'+videoId;document.getElementById('***Video').src=embedUrl;},300);//等待300毫秒确保CSS动画完成}functioncloseVideoPopup(){varpopup=document.getElementById('videoPopup');popup.classList.remove('open');setTimeout(function(){document.getElementById('***Video').src='';},300);//等待CSS动画完成}</script>

PC端添加代码背景图效果如下：

PC端点击背景图播放按钮后弹出层效果：

上面弹出层会在页面最上层，覆盖其它元素，页面上下滚动位置不变。右上角可关闭层，有适配移动端，手机效果差不多，不足的地方就是移动端样式，没有自适应，而是根据不同屏幕宽度，会改变背景图的大小，懂 CSS 的可自行修改，能做到完美自适应的话可发我代码替换。

Tags: