วิธีเพิ่มวิดีโอเป็นพื้นหลังเว็บไซต์ด้วย HTML5

ตั้งค่าวิดีโอเป็นพื้นหลังเต็มหน้าจอ

ใช้แท็ก <video> พร้อมแอตทริบิวต์ autoplay, muted, loop และ CSS ทำให้ครอบคลุมทั้งหน้า

HTML

<video autoplay muted loop id="myVideo">
  <source src="demo.mp4" type="video/mp4">
  เบราว์เซอร์ของคุณไม่รองรับ HTML5 video
</video>

JavaScript ควบคุม Play/Pause

var video = document.getElementById('myVideo');
var btn = document.getElementById('toggleBtn');

function toggleVideo() {
    if (video.paused) {
        video.play();
        btn.innerHTML = "Pause the video!";
    } else {
        video.pause();
        btn.innerHTML = "Play";
    }
}

CSS ทำให้เต็มหน้าจอ

#myVideo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -1;
}