วิธีทำ-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

    <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