這款WordPress區塊以視頻做背景，前面放上居中的文本，給人一種很酷炫的感覺
背景用的視頻是《風犬少年的天空》，這款WordPress區塊以視頻做背景，前面放上居中的文本，給人一種很酷炫的感覺。
- 代碼來源：詳情
效果
補充
類似的網站有：
數據
- 幀寬度：1440
- 幀高度：720
- 幀速率：24幀/秒
自用代碼（B2）
以下代碼需放在首頁第一個HTML模塊，可有全屏效果（重點在最后一段CSS控制全屏顯示）。
<div id="hero" class="video">
<video muted="muted" autoplay="autoplay" loop="loop">
<source src="https://cdn.getimg.net/npc/2020/file/page/1023/video/video-file.mp4" type="video/mp4">
</video>
<div>
<video autoplay="" loop=""></video>
</div>
<div id="top">
<h1>Npcink
</h1>
<h2>Npcink收錄國內外優秀的WordPress、Typecho主題、插件和教程，建站不愁，有我就夠
</h2>
<p style="font-size: 1px;opacity: 0.5;">那些無法擊敗我的，終將使我更加強大</p>
<div class="n-annniu">
<a href="http://m.kartiktrivedi.com/wordpress-page" target="_blank" title="WordPress">
<span class="b2font b2-weixiao-"></span>
WordPress
</a>
<a href="http://m.kartiktrivedi.com/typecho-page" target="_blank" title="Typecho">
<span class="b2font b2-biaoqing"></span>
Typecho
</a>
</div>
</div>
</div>
<style type="text/css">
#hero {
position: relative;
background-position: center;
background-size: cover;
background-color: #555;
margin: 0 0 20px;
text-align: center;
transition: 0.8s;
}
#hero.video video {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*文本*/
#top {
position: relative;
margin: 2em 8em 1em;
padding: 6em 2em;
}
#top h1,
#top h2 {
color: #ffffff;
}
#top h1 {
font-size: 12em;
}
#top h2 {
font-size: 16px;
line-height: 1.8em;
font-weight: bolder;
}
/*按鈕*/
.n-annniu {
text-align: center;
padding-top: 2em;
}
.n-annniu a {
width: 240px;
margin: 0 15px;
display: inline-block;
color: #d33333;
border-radius: 6px;
font-size: 22px;
line-height: 53px;
background: #fff;
}
.home_row_0 .wrapper, .home_row_0 .wrapper .box {
width: 100%!important;
box-shadow: none;
}
</style>注意，代碼中的視頻地址為Npcink的OSS存放地址，已做防盜鏈處理，在您的網站上無法播放。
如何使用
點擊下方的Demo按鈕，右擊鼠標查看源代碼，根據代碼注釋復制代碼到自己需要的地方，例如古登堡的HTML區塊或是小工具里面的“自定義HTML”，另外，記得看代碼注釋哦(。???)ノ
感謝感謝，學到了。感謝你的無私分享。我白嫖了，慚愧
??學到了 白嫖＋1
學習了?。。。?！