HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง

อีกหนึ่งเทคนิคการทำเว็บไซต์สมัยใหม่ที่นิยมทำกันมากมายในปัจจุบัน เป็นลูกเล่นการทำเว็บไซต์ที่ดึงดูดผู้เข้าชมเว็บไซต์ได้เป็นอย่างดี นอกจากจะสร้างความหน้าสนใจให้กับเว็บไซต์แล้ว การทำวีดีโอให้เป็นพื้นหลังของเว็บไซต์ ยังสามารถสื่อสารข้อมูลปริมาณมาก ๆ ให้ผู้เข้าชมเว็บไซต์สามารถเข้าใจข้อมูลต่าง ๆ ได้โดยไม่ต้องเปลี่ยนหน้าและใช้เวลาไม่นานจนเกินไป

ตัวอย่าง CSS Video Background

เตรียม Resource ก่อนทำ

1. หาวีดีโอแบบ mp4 ถ้าเป็นไปได้ให้ฝากไฟล์ไว้กับเว็บไซต์อย่าง youtube หรือ vimeo และหาวิธีเอาลิงค์วีดีโอมาใช้งาน จะทำให้วีดีโอโหลดและเล่นได้เร็วขึ้น
2. สร้างไฟล์ index.html และไฟล์ main.css เรียกเข้ามาใช้งานใน index.html
3. เพื่อให้สามาถแสดงรูปพื้นหลังได้ทันที ใน html5 video element ให้เรากำหนด attribute post เป็นรูปที่ crop จากซีนแรกของวีดีโอ จะทำให้การแสดงวีดีโอพื้นหลังดู smooth ขึ้น

ทำวีดีโอให้เป็นพื้นหลังแบบ Pure CSS

1. สร้าง Video Container และ Video Element

เริ่มต้นให้เราสร้าง div ไว้เป็น container สำหรับครอบ video และเมนูข้อความที่จะให้อยู่บนวีดีโอ กำหนดให้เล่นวีดีโอแบบอัตโนมัติ autoplay เพื่อไม่ให้วีดีโอแสดง default control ของ browser

<div class="video-container">
    // ใส่เนื้อหาที่ต้องการให้อยู่บนวีดีโอตรงนี้
    <video autoplay="autoplay">
      <source src="video/video.mp4" type="video/mp4">
    </video>
</div>

2. เขียนคำสั่ง CSS ให้ video-container

เขียน css กำหนดให้ video-container มี position เป็น absolute มีความกว้างและสูงเป็น 100%

video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}

3. เขียนคำสั่ง css กำหนดขนาดของวีดีโอให้มีขนาด 100%

เขียนคำสั่ง css กำหนดขนาดของ video element ให้มีความกว้างและความสูง 100%

.video-container video {
  min-width: 100%; 
  min-height: 100%; 
}

4. เขียนคำสั่ง css สำหรับ overlay สำหรับ div ที่ต้องการให้อยู่บนวีดีโอ

ต่อมาให้เราสร้าง overlay class ใน css สำหรับกำหนด div ที่จะทำงานอยู่เหนือวีดีโอ

.overlay {
  position: absolute;
  width: 100%;
  background: rgba(0,0,0,0);
}

5. ทดลองใช้คลาส overlay

ทดลองสร้าง div ที่มีข้อมูลเป็นตัวหนังสือและใช้งานคลาส overlay


    
      เนื้อหาที่จะแสดงบนวีดีโอ

ตัวอย่าง CSS Video Background

HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง