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

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