Full-Width Video, Responsive Video แล้วแต่จะเรียก
ในปัจจุบันเว็บไซต์ส่วนใหญ่ต่างพากันเป็น responsive layout ไปหมดแล้ว.. ก็แน่ล่ะ เรื่องของ mobile friendly นั้นมีผลต่อลำดับการแสดงผลของ search engine ด้วย ผมว่าการทำ responsive website นั้นง่ายครับ ไม่ได้มีอะไรซับซ้อนมากเหมือนเมื่อก่อนที่เราต้องมานั่งเขียน media query ในการควบคุมการแสดงผลของ CSS บนหน้าเว็บไซต์กันเอง ประกอบกับมี CSS framework เกิดขึ้นมาใหม่หลายเจ้า หลายคนอาจจะใช้ Bootstrap, Foundation, Semantic UI ฯลฯ ซึ่งพวกนั้นก็สำเร็จรูปดำเนินการด้าน responsive ให้เรียบร้อย เพียงแค่เรียกใช้ class ตามที่เขาสร้างกันขึ้นมา
แต่ในเรื่องของเนื้อหาหลักๆ แล้วมีส่วนนึงที่อยากจะเขียนถึงเลยนั่นคือเรื่องของวิดีโอ การใส่วิดีโอลงไปในเว็บไซต์มันก็ง่ายแสนง่าย ผมยกตัวอย่างเช่น Youtube เป็นต้น เพียงแค่เราเข้าไปที่หน้าวิดีโอที่เราต้องการจะนำมาแปะลงเว็บไซต์ของเรา แล้วก็เลือกไปที่เมนู Share จากนั้นกดแท็บ Embed คุณผู้อ่านก็จะได้ code ยาวๆ มาสักบรรทัดไว้แปะวิดีโอลงเว็บไซต์ของเราแล้ว ง่ายใช่ไหม? แต่ปัญหามันคือวิดีโอที่เรานำมานั้นไม่ได้รองรับ responsive layout ตั้งแต่แรก(สำหรับผู้ที่ใช้ WordPress ในการทำเว็บไซต์ บางธีมที่ท่านใช้อยู่อาจจะทำให้มันเป็น responsive แล้ว) ทีนี้ทำยังไงล่ะ เวลาลูกค้าเปิดเว็บไซต์ของเราในมือถือจอเล็กๆ วิดีโอนั้นก็ล้นซะน่าเกลียดเลย บทความนี้จะพูดถึงวิธีปรับขนาดของวิดีโอ หรือ embed จากหลายที่ให้ dynamic ตามขนาดของกล่องเนื้อหากันครับ
1. สร้าง container ขึ้นมารองรับ
การแปะ embed ลงไปแล้วจัดการที่ตัว embed นั้นเลยอาจจะยุ่งยากและไม่สะดวกครับ ผมแนะนำให้สร้างกล่องเนื้อหา(หรือ container แล้วแต่จะเรียก) ขึ้นมาครอบมันก่อนชั้นนึง เวลาที่จะนำไปแปะตรงส่วนไหนก็เอาไปทั้ง กล่องได้เลย แล้วขนาดของวิดีโอก็จะ dynamic ตามขนาดของกล่องเนื้อหาก้อนนั้น สมมติว่าผมให้กล่องเนื้อหานั้นเป็น div และมี class ชื่อว่า “video-wapper” แล้วกันเข้าใจง่ายดี HTML tag ที่เราจะสร้างก็จะมีหน้าตาแบบนี้ครับ
<div class="video-wrapper"></div>
2. ยัด embed เอาไว้ข้างใน
โถ่ วิธีนี้ไม่ต้องเขียนเป็นหัวข้อก็ได้มั้ง ก็แค่เอา code embed หรือ iframe จาก Youtube หรือวิดีโอที่ไหนมาใส่ลงไปใน HTML tag ที่เราเพิ่งสร้างขึ้นเมื่อกี้ไง ซึ่งหน้าตาจะได้ประมาณนี้
3. เขียน CSS คุมการแสดงผลให้เป็น responsive
ขั้นตอนนี้อาจจะใช้ทักษะพื้นฐานด้าน CSS เข้ามามากกว่าสองขั้นตอนแรกหน่อยครับ แต่อย่าคิดมากเลย มันก็เป็นแค่ code ง่ายๆ ไม่กี่บรรทัดที่คุมการแสดงผลให้กับ class “video-wrapper” และสิ่งที่อยู่ข้างในนั้นอย่าง embed และ iframe ซึ่งผมจะอธิบายให้ด้านท้าย
อธิบายแบบรวบรัดสรุปใน 20 วินาทีได้เลยคือ เราจะให้ขนาดของ tag embed และ iframe ข้างใน “video-wrapper” นั้นมีขนาดตามกล่องเนื้อหาด้านนอก โดยกล่องเนื้อหาด้านนอกเนี่ยแหละที่เราจะใช้ padding เป็นตัวควบคุมความกว้างสูงแทนใส่ค่าเป็น width, height ที่จำเพาะเจาะจง อย่างด้านบนที่ใส่ค่า 56.25% นั้นเพื่อปรับการแสดงผลให้เหมาะสมกับวิดีโอที่มี ratio ขนาด 16:9 ซึ่งเป็นขนาดยอดฮิต และวิดีโอส่วนใหญ่ใช้ในปัจจุบัน(ถ้าใครต้องการใช้ 4:3 ให้ปรับค่าเป็น 75% แทน) โดยเพิ่มเทคนิคอย่าง padding-top ใส่มาเผื่อวิดีโอไหนที่เห็นขอบบนล่างเป็นสีดำ เราสามารถเพิ่มลดค่าตรงนี้เพื่อเอาขอบออกไปได้ครับ
เพียงเท่านี้วิดีโอที่เอามาแปะก็แสดงผลเป็น responsive แล้วเรียบร้อย
[youtube]https://www.youtube.com/watch?v=VHJp-17MLDI[/youtube]
Case study กับบางอย่างที่เราควบคุมไม่ได้
อย่างกรณีของผมเป็นผู้ให้บริการจัด ทำเว็บไซต์ ลูกค้าส่วนใหญ่จะกรอกเนื้อหาอะไรลงไปก็ได้ครับ โดยเขาเองก็ไม่ได้คำนึงว่าจะต้องมานั่งจำ code บ้าบออะไรพวกนี้ แค่ชอบวิดีโอไหนก็อยากแปะมันลงไปเลยตรงๆ(ตามประสบการณ์ผู้ใช้ทั่วไป) ทีนี้พอแปะ code ที่ไม่ได้อยู่ในกล่องที่เราเขียนขึ้น ก็จะไม่ได้เป็น responsive ถูกไหมครับ วิธีที่ง่ายที่สุดแล้วก็ happy ทั้งสองฝ่ายเลยคือ ผมต้องใช้ JavaScript เข้ามาช่วยนิดหน่อย โดยบอกว่า “เฮ้ ไอ้เบราเซอร์ ถ้าโหลดหน้าเว็บแล้วแกพบว่ามี embed หรือ iframe อะไรอยู่ แกเอากล่องที่เขียนนี้ครอบมันให้ทีนะ บาย” ซึ่งก็เขียนเป็น code(ใช้ jQuery) ได้ประมาณนี้
จบครับ เดี๋ยวเบราเซอร์มันก็จะทำงานเมื่อตรวจสอบพบว่า class ที่ชื่อ “entry-content” ของผมมี embed หรือ iframe อยู่ในหน้าเพจนั้น แต่ช้าก่อน ถ้าคุณหันมาใช้ WhiteTail ซึ่งเป็นธีม WordPress ที่ผมเขียนขึ้นมาแจก(แล้วตัวเองก็ใช้อยู่) ตามที่คุณเห็นในหน้าเว็บไซต์นี้แหละ คุณจะไม่ต้องเขียนอะไรมากมายกันไว้ให้ลูกค้าของคุณหรอกครับ เพราะที่หน้า editor ด้านหลังบ้านของ WordPress ผมได้เพิ่มปุ่ม Youtube และ Vimeo ไว้ให้แล้ว แค่คุณนำลิงค์มาวางใน dialog box ที่ขึ้นมา วิดีโอนั้นก็จะกลายเป็น responsive layout ไปโดยปริยาย โดยไม่ต้องไปเขียน code เพิ่มลงในธีมอีก
ตัวอย่างครับ
สำหรับผู้ที่สนใจโหลด WhiteTail ไปใช้งาน สามารถโหลดได้ฟรีผ่าน Github ของ JindaTheme ได้เลย
ขอบคุณนะค่ะ เคยคิดว่า มันยาก แต่คุณอธิบายได้เข้าใจ เดวเราจะลองทำดูคะ
ยินดีครับผม