A background image can be clicked on the pop-up layer to play Youtube videos

When we are an independent foreign trade station, a video may need to pop up and play it on the homepage or other introduction pages, and the background image can be replaced at any time. Some templates will write these codes well. If WordPress’s page builder does not have this function and the purchased template does not have this function, then we have to create a layout and add a background image ourselves to click on the pop-up layer to play the Youtube video code.

The following is the complete front-end code for this piece. There are some minor shortcomings, and a group will explain them: Add CSS styles:

.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;
}

Code to display background image:

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

script code, before adding footer/body:

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

The effect of adding a code background picture on the PC side is as follows:

On the PC side, click the background image play button and a layer effect will pop up:

On the PC side, click the background image play button and a layer effect pops up

The upper pop-up layer will be at the top of the page, covering other elements, and the position of scrolling up and down on the page remains unchanged. The layer can be closed in the upper right corner, and there is an adaptive mobile terminal. The mobile phone effect is similar. The shortcoming is the mobile terminal style. There is no adaptation. Instead, the size of the background image will change according to different screen widths. Those who understand CSS can modify it themselves. If you are perfectly adaptive, you can send me code to replace it.

A background image can be clicked on the pop-up layer to play Youtube videos

By seopew