jQuery視頻全屏輪播插件是一款非常實用的插件,它可以讓網站的視頻更加生動、具有吸引力。以下是一些使用jQuery視頻全屏輪播插件的相關代碼和方法。
首先,引入jQuery和插件文件:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="jquery.vide.js"></script>
接著,在 HTML 中添加視頻和輪播的容器:
<div class="header"> <div class="fullscreen-video-wrap"> <video id="header-video" autoplay="" loop="" muted="" playsinline=""> <source src="video.mp4" type="video/mp4"> </video> <div class="header-overlay"></div> <div class="header-content"> <div class="header-content-inner"> <h1>Welcome to my Website</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="#" class="btn btn-primary btn-lg">Learn more</a> </div> </div> </div> </div>
然后,使用以下代碼初始化插件:
<script> $('#header-video').vide({ mp4: 'video.mp4', poster: 'poster.jpg' }, { posterType: 'jpg' }); </script>
最后,在 CSS 中添加樣式:
.fullscreen-video-wrap { position: relative; width: 100%; height: 100vh; overflow: hidden; } #header-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); } .header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; } .header-content { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; color: #fff; z-index: 2; } .header-content h1 { font-size: 5em; margin-bottom: 0.2em; } .header-content p { font-size: 1.75em; margin-bottom: 1em; } .header-content .btn { font-size: 1.5em; }
通過以上操作,網站中的視頻輪播就已經成功地展示在頁面中了!
下一篇div css線條