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

<h3>HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;อีกหนึ่งเทคนิคการทำเว็บไซต์สมัยใหม่ที่นิยมทำกันมากมายในปัจจุบัน เป็นลูกเล่นการทำเว็บไซต์ที่ดึงดูดผู้เข้าชมเว็บไซต์ได้เป็นอย่างดี นอกจากจะสร้างความหน้าสนใจให้กับเว็บไซต์แล้ว การทำวีดีโอให้เป็นพื้นหลังของเว็บไซต์ ยังสามารถสื่อสารข้อมูลปริมาณมาก ๆ ให้ผู้เข้าชมเว็บไซต์สามารถเข้าใจข้อมูลต่าง ๆ ได้โดยไม่ต้องเปลี่ยนหน้าและใช้เวลาไม่นานจนเกินไป<br &sol;>&NewLine;<&sol;br><&excl;--more--><&sol;p>&NewLine;<blockquote><p><a href&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;video&lowbar;background&sol;" target&equals;"&lowbar;blank">ตัวอย่าง CSS Video Background<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เตรียม Resource ก่อนทำ<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; หาวีดีโอแบบ mp4 ถ้าเป็นไปได้ให้ฝากไฟล์ไว้กับเว็บไซต์อย่าง youtube หรือ vimeo และหาวิธีเอาลิงค์วีดีโอมาใช้งาน จะทำให้วีดีโอโหลดและเล่นได้เร็วขึ้น<&sol;li>&NewLine;<li>2&period; สร้างไฟล์ index&period;html และไฟล์ main&period;css เรียกเข้ามาใช้งานใน index&period;html<&sol;li>&NewLine;<li>3&period; เพื่อให้สามาถแสดงรูปพื้นหลังได้ทันที ใน html5 video element ให้เรากำหนด attribute post เป็นรูปที่ crop จากซีนแรกของวีดีโอ จะทำให้การแสดงวีดีโอพื้นหลังดู smooth ขึ้น<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ทำวีดีโอให้เป็นพื้นหลังแบบ Pure CSS<&sol;h4>&NewLine;<ul>&NewLine;<li><strong>1&period; สร้าง Video Container และ Video Element<&sol;strong><&sol;li>&NewLine;<p>เริ่มต้นให้เราสร้าง div ไว้เป็น container สำหรับครอบ video และเมนูข้อความที่จะให้อยู่บนวีดีโอ กำหนดให้เล่นวีดีโอแบบอัตโนมัติ autoplay เพื่อไม่ให้วีดีโอแสดง default control ของ browser <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;&lt&semi;div class&equals;"video-container"&gt&semi; &NewLine; &sol;&sol; ใส่เนื้อหาที่ต้องการให้อยู่บนวีดีโอตรงนี้ &NewLine; &lt&semi;video autoplay&equals;"autoplay"&gt&semi; &NewLine; &lt&semi;source src&equals;"video&sol;video&period;mp4" type&equals;"video&sol;mp4"&gt&semi; &NewLine; &lt&semi;&sol;video&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<li><strong>2&period; เขียนคำสั่ง CSS ให้ video-container<&sol;strong><&sol;li>&NewLine;<p>เขียน css กำหนดให้ video-container มี position เป็น absolute มีความกว้างและสูงเป็น 100&percnt;<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >video-container &lbrace; &NewLine; position&colon; absolute&semi; &NewLine; top&colon; 0&semi; &NewLine; bottom&colon; 0&semi; &NewLine; width&colon; 100&percnt;&semi; &NewLine; height&colon; 100&percnt;&semi; &NewLine; overflow&colon; hidden&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<li><strong>3&period; เขียนคำสั่ง css กำหนดขนาดของวีดีโอให้มีขนาด 100&percnt;<&sol;strong> <&sol;li>&NewLine;<p>เขียนคำสั่ง css กำหนดขนาดของ video element ให้มีความกว้างและความสูง 100&percnt;<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&period;video-container video &lbrace; &NewLine; min-width&colon; 100&percnt;&semi; &NewLine; min-height&colon; 100&percnt;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<li><strong>4&period; เขียนคำสั่ง css สำหรับ overlay สำหรับ div ที่ต้องการให้อยู่บนวีดีโอ<&sol;strong><&sol;li>&NewLine;<p>ต่อมาให้เราสร้าง overlay class ใน css สำหรับกำหนด div ที่จะทำงานอยู่เหนือวีดีโอ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&period;overlay &lbrace; &NewLine; position&colon; absolute&semi; &NewLine; width&colon; 100&percnt;&semi; &NewLine; background&colon; rgba&lpar;0&comma;0&comma;0&comma;0&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<li><strong>5&period; ทดลองใช้คลาส overlay<&sol;strong><&sol;li>&NewLine;<p>ทดลองสร้าง div ที่มีข้อมูลเป็นตัวหนังสือและใช้งานคลาส overlay<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;<div class&equals;"video-container"> &NewLine; <div class&equals;"overlay"> &NewLine; เนื้อหาที่จะแสดงบนวีดีโอ &NewLine; <&sol;div> &NewLine; <video autoplay&equals;"autoplay"> &NewLine; <source src&equals;"video&sol;video&period;mp4" type&equals;"video&sol;mp4"> &NewLine; <&sol;video> &NewLine;<&sol;div> &NewLine;<&sol;pre>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;video&lowbar;background&sol;" target&equals;"&lowbar;blank">ตัวอย่าง CSS Video Background<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;