Looking to display 2-3 .mp4 files randomly on each page load? Consider using JavaScript for this task. Here's a snippet of code that you can use as a starting point:
#vid {
position: fixed;
min-width: 100%;
min-height: 100%;
opacity: 1;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
overflow: hidden;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
background: #070915;
background: rgba(7, 9, 21, .5);
filter: brightness(62.5%);
top: 50%;
left: 50%;
Within the HTML markup, include the following video element with JavaScript for controlling playback:
<video autoplay class="fadeIn" disablePictureInPicture disableRemotePlayback id="vid" loop playsinline>
<source src="assets/media/video1.mp4" type="video/mp4" />
<source src="assets/media/video2.mp4" type="video/mp4" />
<script type="text/javascript">
const video = document.currentScript.parentElement;
video.volume = 0.15;
function pause_resume() {
const button = document.getElementById("pause_resume_button");
if (video.paused) {
video.play()
button.textContent = "resume video";
} else {
video.pause()
button.textContent = "pause video";
}
}
</script>
</video>
<div class="font-right-bottom animated fadeInUp">
<a style="font-size:0.9em;" class="font-bold font-white" href="javascript:void(0);" onclick="pause_resume()" id="pause_resume_button">pause video</a>
<p style="font-size: 0.9em;" class="font-light font-white no-margin">pog?</p>
<br>
</div>