วิธีทำ-full-video-background

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

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

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

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

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


ตัวอย่าง CSS Video Background


กระทู้ใกล้เคียง

วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ... วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ วิธีทำ Banner ดูตัวอย่าง Banner หลาย ๆ เว็บไซต์จำเป็นต้องมีการแสดง Banner เพราะบางทีแบนเนอร...
ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ con... ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ content ทำเว็บไซต์ สอน CSS คงจะเคยผ่านตามากันบ้างแล้วสำหรับนักพัฒนาเว็บไซต์สำหรับ before, after และ...
Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยช... Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยชน์ Lazy Load คือคำเรียกของการจัดการกับทรัพยากร ( Resource ) บนเว็บไซต์เพื่อเพิ่มศักยภาพการทำงานขอ...
เว็บไซต์สมัยใหม่ กับ 5 องค์ประกอบหลักที่ควรมี... เว็บไซต์สมัยใหม่ กับ 5 องค์ประกอบหลักที่ควรมี ปฏิเสธไม่ได้ว่า ปัจจุบันสื่อออนไลน์ในรูปแบบต่าง ๆ เว็บไซต์ สื่อสังคม ออนไลน์แอพพลิเคชั่น ก้าวเข้ามามี...