HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง
อีกหนึ่งเทคนิคการทำเว็บไซต์สมัยใหม่ที่นิยมทำกันมากมายในปัจจุบัน เป็นลูกเล่นการทำเว็บไซต์ที่ดึงดูดผู้เข้าชมเว็บไซต์ได้เป็นอย่างดี นอกจากจะสร้างความหน้าสนใจให้กับเว็บไซต์แล้ว การทำวีดีโอให้เป็นพื้นหลังของเว็บไซต์ ยังสามารถสื่อสารข้อมูลปริมาณมาก ๆ ให้ผู้เข้าชมเว็บไซต์สามารถเข้าใจข้อมูลต่าง ๆ ได้โดยไม่ต้องเปลี่ยนหน้าและใช้เวลาไม่นานจนเกินไป
เตรียม 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>
เขียน css กำหนดให้ video-container มี position เป็น absolute มีความกว้างและสูงเป็น 100%
video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
เขียนคำสั่ง css กำหนดขนาดของ video element ให้มีความกว้างและความสูง 100%
.video-container video {
min-width: 100%;
min-height: 100%;
}
ต่อมาให้เราสร้าง overlay class ใน css สำหรับกำหนด div ที่จะทำงานอยู่เหนือวีดีโอ
.overlay {
position: absolute;
width: 100%;
background: rgba(0,0,0,0);
}
ทดลองสร้าง div ที่มีข้อมูลเป็นตัวหนังสือและใช้งานคลาส overlay