视频的代码一段背景图可点击弹出层播放 Youtube (视频的代码一般是什么)

分类：本站公告 - 时间：2024-10-12 - 浏览：次

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

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

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

本文地址：

相关标签：狂人网络、

本文地址：https://www.mianfeishoulu.com/article/15488.html

相关内容

CPC (cpchat聊天软件下载)

CPC、CPA、CPM、PPC、ROI和ROAS，这些都是数字营销和广告领域中的关键术语，用于衡量和评估广告和营销活动的效果，了解这些术语的意义和应用，对于有效管理和优化数字营销活动很重要，本文狂人SEO将详细分享这些术语的意思，一、CPC是什么意思CPC是CostPerClick的缩写，意思是，广告主只需为用户点击其广告付费，每当用...。

[解决方法] Telegram提示抱歉目前您被限制在此群组发送消息 (解决方法有哪些)

每个社交平台都有自己的社区规则，如果你不遵守既定规则，很可能会被限制或禁止这个帐户的某些功能，Telegram，电报，对应用程序的使用也有严格的规定，如果出现违规或被投诉，在某个群发言会提示，抱歉，目前您被限制在此群组发送消息，，英文提示，Sorry，youarecurrentlyrestrictedfrompostingtopubl...。

月核心算法更新 2024 解读年 Google 8 (核心算法是什么意思)

Google的2024年8月核心更新在8月15日发布，标志着不断完善搜索结果的使命又迈出了一步，通常大约需要一个月才能完全上线，但现在有些网站已经可以看到变化，今天狂人SEO来解读下这次的核心算法更新，一、关于谷歌这次核心更新的要点这次更新比较有趣，因为它是根据内容创建者和其他主要利益相关者的反馈而制定的，Google一直在倾听用户的...。

视频的代码一段背景图可点击弹出层播放 Youtube (视频的代码一般是什么)

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

[解决]删过mysql (已经删除)

如果你发现宝塔server，data里mysql，bin日志文件很大，然后不小心将时间久远的删除，再启动MySQL服务时出现MySQL无法启动的提示，那么这文章将简单教你解决这个问题，1、请点击软件商店→已安装→MySQL右边的，设置，，在弹出的MySQL管理中右边点，错误日志，，查看是否有，notfound，Errcode，2，No...。

ocpm和ocpc什么区别 (Ocpm和Ocpc是什么意思有什么区别)

在推广平台上，通常不会只有一种收费方式，一般都会增加广告的多样性，让广告主有更多的选择，而Ocpm和Ocpc也是比较常见的广告计费方式，很多人不知道两者的区别，今天我们来了解一下Ocpm和Ocpc是什么意思，一、Ocpm和Ocpc是什么意思O是英文单词Optimized的首字母，意思为优化，所有加O的广告都可叫做，按目标转化出价，即可...。

我们已向您其他设备上的Telegram应用发送了一条 (我们已向您其他设备上的telegram应用发送了一条验证码消息 [解决方法])

收不到TelegramAPP发送的验证码可能有多种原因，包括第三方发码平台短信接收问题、设备应用问题和网络问题等，其中一个常见的原因是，我们已向您其他设备上的Telegram应用发送了一条验证码消息，本文将介绍电报登录验证码发送到已登录设备的原因以及解决方法，一、向已登录APP发送验证码的原因，原来手机设备上的TelegramAPP被...。

youtube官网 (youtube.com 拒绝了我们的连接请求提示的解决方法)

在制作国际站页面时，我们经常会嵌入YouTube的视频，比如在博客文章页面、公司介绍页、产品落地页和活动页等，如果我们不注意一些细节，当我们粘贴YouTube视频地址时，会收到，www.youtube.com拒绝了我们的连接请求，的提示，今天我将分享解决这个问题的方法，一、原因分析通常，当我们从YouTube点击分享链接后，我们得到的...。

cpc是什么意思啊 (CPC)

在数字营销和广告领域中，CPC、CPA、CPM、PPC、ROI和ROAS是一些关键术语，用于衡量和评估广告和营销活动的效果，了解这些术语的意义和应用，对于有效管理和优化数字营销活动很重要，下面将详细解释这些术语的含义和用途，一、CPC是CostPerClick的缩写，意思是每次点击的成本，广告主只需为用户点击其广告付费，无论用户之后是...。

随机推荐