7B2美化(任何主题都可以用)请自行做适配
NO:1首页大屏视频展示
代码
html
<div class="video-home">
<div class="video-page " id="video--header">
<div class="video-container">
<!-- 视频链接 -->
<video class="video-home2"
src="你的视频.mp4"
loop="" muted="" playsinline="" webkit-playsinline="" style="">
</video>
</div>
</div>
</div>
css
.video-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
will-change: transform;
animation: blur-to-clear 2s cubic-bezier(.62, .21, .25, 1) 0s 1 normal backwards running, scale 1.5s cubic-bezier(.62, .21, .25, 1) 0s 1 both;
}
.video-home {
position: relative;
min-height: 100%;
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
line-height: 2;
-webkit-tap-highlight-color: transparent;
margin: 0px;
}
#page-header.video-page {
height: 100vh;
background-attachment: fixed;
border-radius: 0;
}
#video--header {
background-image: none !important;
display: flex;
justify-content: center;
}
#page-header {
position: relative;
width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s ease 0s;
}
.video-home2 {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
pointer-events: none;
}
安装过于简单 就不演示了)))
NO:2极(鸡)子主题
另外有购买极(鸡)子主题 可以在 极子主题-首页设置-搜索模块 打开视频区块 但大屏只有四分之一的效果
需要实现这种效果 需要在子主题的
/b2Jitheme/Render/Css/jitheme.css 搜索 .home-banner .section改成
.home-banner .section {
position:relative;
width:100%;
overflow:hidden;
max-height: 100vh;
height: 100vh;
}
/b2Jitheme/style.css 随便找一个地方加上
/*这个可要可不要*/
.big_title {
font-size: 60px!important;
}
/*这个必须要*/
.section{
margin-top: -16px;
}
/*不懂全部加上就完事了*/
ojbk
NO:3 2024重新复刻了一个版本
<div class="dmy-homevideo">
<div class="ying-homevideo-content ying-homevideo-orientation ">
<section class="ying-homevideo-offvideo home-video">
<div class="ying-homevideo-top">
<video id="myVideo" autoplay playsinline loop muted
src="/wp-content/themes/dmychild/Assets/img/1517246-24fps.mp4" width="600">
</video>
<!--<img src="wp-content/themes/dmychild/Assets/img/no1.jpg">-->
</div>
</div>
/* 首页视频开始 */
.ying-homevideo-content {
/* position: relative; */
z-index: 1;
background-position: 0 100%;
animation: gradient 12s ease-in-out infinite;
}
.ying-homevideo-content .ying-homevideo-offvideo {
position: relative;
width: 100%;
overflow: hidden;
max-height: 100vh;
height: 60vh;
border-radius: 0px 0px 10px 10px;
}
.ying-homevideo-orientation {
position: relative;
}
.ying-homevideo-offvideo {
margin-top: -74px;
max-height: 880px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ying-homevideo-top {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
z-index: 0;
}
.ying-homevideo-top video {
visibility: visible;
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
object-fit: cover;
}
.ying-homevideo-filters {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
background: rgba(45, 47, 54, .15);
}
/* 首页视频结束 */
/* 首页中间大标题开始 */
.ying-dmyblog {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
flex-direction: column;
}
.ying-dmyblogtitle {
font-size: 60px;
line-height: 24px;
letter-spacing: 2px;
font-weight: 600;
color: #fff;
text-shadow: 4px 8px 6px rgba(0, 0, 0, .25);
}
.ying-dmyblog-typewriter {
margin-top: 50px;
}
.ying-dmyblog-typewriter-title {
font-weight: 600;
font-size: 26px;
/* line-height: 40px; */
/* letter-spacing: 3px; */
text-align: center;
color: #fff;
text-shadow: 7px 14px 4px rgba(0, 0, 0, .25);
}
/* 首页中间大标题结束 */
有问题评论区dd 之后更新一个dlc😅😅