วิธีการ Embed วีดิโอ Youtube ลงในเว็บไซต์ และทำให้ Responsive ด้วย CSS ง่าย ๆ

designil

ปัจจุบัน Content ที่เป็นวีดิโอมีมากขึ้นเรื่อย ๆ เพราะอินเตอร์เน็ตเราเร็วกันแล้ว สามารถเสพย์เนื้อหา Video ได้สะดวกขึ้นกว่าเดิมเยอะมาก ๆ แน่นอนว่าคนทำเว็บไซต์อย่างเราก็ควรจะต้องรู้วิธีการใส่วีดิโอลงในเว็บไซต์ รวมถึงวิธีทำให้วีดิโอของเราย่อขยายอัตโนมัติตามหน้าจอ (หรือที่เรียกว่า Responsive)

ในบทความนี้เราจะมาดูวิธีการนำวีดิโอ Youtube มาลงในเว็บไซต์กันก่อน (นำไปใช้กับเว็บ Stream วีดิโออื่น ๆ ได้หมด เช่น Vimeo) แล้วก็จะมาพูดถึงวิธีการทำให้วีดิโอ Responsive ซึ่งเรียกได้ว่าเป็นปัญหาที่คนทำเว็บไซต์ต้องเจอกันแน่นอน เพราะแอดได้รับคำถามทาง Inbox เรื่องนี้อยู่เป็นระยะ เลยตัดสินใจเอามาเขียนสรุปให้เป็นประโยชน์แก่ทุกท่านกันเลยครับ

การใส่วีดิโอ Youtube ลงในเว็บไซต์ของเรา

วิธีใส่วีดิโอ Youtube / Vimeo / หรือเว็บที่ Stream วีดิโอใด ๆ ก็ตาม ส่วนใหญ่จะเหมือนกันหมด คือ

  1. ในหน้าวีดิโอที่เราดูอยู่ หาปุ่มที่เขียนว่า “Embed” ให้เจอ บางทีจะะเป็นไอคอนรูป “>” ที่แสดงถึงโค้ด และบางครั้งก็จะซ่อนอยู่ในปุ่ม “Share” อีกที

    ใต้วีดิโอ Youtube ให้กด Share > Embed

  2. จากนั้นก็อปโค้ดที่เค้าให้มาใส่ใน HTML ได้เลย ปกติโค้ดต้องมีแท็กชื่อ <iframe>

    ตัวอย่างโค้ด Embed ของ Youtube

แค่นี้เราจะได้วีดิโอมาใส่ในเว็บไซต์ของเราแล้วครับ ถ้าใครยังไม่เป็น ลองดูตัวอย่างโค้ดใน Codepen ด้านล่างนี้ได้เลย

แต่… จากด้านบนจะเห็นว่า วีดิโอมันขาด!

วีดิโอไม่ Responsive นะจีะ แต่เธอไม่รู้บ้างเลย

ในยุคที่ทุกคนเข้าเว็บไซต์ด้วยมือถือกันเป็นเรื่องปกติ การทำวีดิโอให้ Responsive สำคัญมาก เรามาดูวิธีทำให้วีดิโอ Responsive แบบง่าย ๆ กันครับ

วิธีทำให้ Video บนเว็บไซต์ Responsive จริง ๆ มีแค่วิธีเดียว

สำหรับคนที่คิดว่ามันเหมือนการทำรูปภาพ <img> ให้ Responsive หรือเปล่า ก็ต้องตอบว่า “ไม่ใช่” นะครับ อันนั้นเราใส่ width: 100% ให้รูปได้เลย แต่วีดิโอทำแบบนั้นแล้วมันจะไม่เป็น Responsive ให้

เมื่อวานนี้แอดมินได้ โพสถามในเพจ Designil ว่าแต่ละคนใช้วิธีไหนกันบ้าง ซึ่งก็เจอกับวิธีเด็ด ๆ มากมาย ทั้งใช้ CSS, CSS Framework (Bootstrap), เจนโค้ดจากเว็บ, JavaScript แอดเลยไปลองเช็คดูทีละวิธี และพบว่า… จริง ๆ แล้วทุกวิธีนี้สุดท้ายมันคือวิธีเดียวกัน แค่ว่า Generate โค้ดจากอะไรเท่านั้นเองครับ และบางตัวเช่น JS ก็มีฟีเจอร์แถมมานิดหน่อยด้วย

เรามาเริ่มจากวิธีใช้ CSS แบบง่าย ๆ กันก่อนเลย ใช้กับเว็บไหนก็ได้ หรือเป็นเว็บที่ซับซ้อนที่ใช้ React, Angular, Vue.js ก็ยังได้

วิธี CSS พื้นฐาน: Embed วีดิโอ Youtube บนเว็บไซต์ให้ Responsive

สำหรับคนที่อยากได้วิธีง่าย ๆ ไม่ต้องพึ่ง Framework หรือ JavaScript ตัวไหนให้หนักเว็บ สามารถใช้โค้ดจากบทความ Fluid Width Video ของ CSS-Tricks ได้เลยครับ วิธีทำดังนี้เลย:

  1. ครอบ <iframe> ด้วย <div class=”videoWrapper”>
  2. ใส่ CSS นี้ลงไป เป็นอันเรียบร้อย
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

มีท่านใดทำนายถูกมั้ยฮะว่ามันทำงานยังไง

แค่ CSS 10 บรรทัดทำให้วีดิโอ Responsive ได้ยังไง?

วิธีการทำงานของ CSS สำหรับทำ Responsive Video

โค้ดนี้เป็นการสร้างพื้นที่เปล่า ๆ เพื่อวางวีดิโอ โดยที่ “ขนาดของพื้นที่เปล่า ๆ ต้องเท่ากับวีดิโอพอดี” ซึ่งใช้วิธีกำหนด padding-bottom เป็น 56.25% ครับ ซึ่งสาเหตุที่เค้าใช้แบบนี้น่าสนใจมากครับ นั่นคือ:

  • ใช้ padding-bottom: เพราะว่าค่า % ใน padding จะคิดตามความกว้างของ Element ตัวนี้เป็นหลักครับ ต่างกับค่า % ใน height ที่จะคิดตามความกว้าง container ข้างนอกอีกที
  • ใช้ 56.25%: เพราะว่า Ratio ของวีดิโอส่วนใหญ่เป็น 16:9 ซึ่งถ้าเทียบบัญญัติไตรยางค์แล้ว จะได้ออกมาเป็นความสูง = 56.25% ของความกว้างนั่นเองครับ (การคำนวณดูได้ในรูปประกอบบทความนี้)

ตัวอย่างการใช้งานอยู่ด้านล่างนี้เลยครับ จะเห็นว่าวีดิโอของเราไม่ทะลุกรอบแบบอันที่แล้ว

ตอนแรกอาจจะดูเหมือนว่าเป็นโค้ดที่ดูงง ๆ เลข 56.25% มาจากไหน ถ้าขี้เกียจจำก็ใช้ 50% หรือ 55% ไปเลยก็ได้ครับ ผลลัพธ์ไม่ค่อยต่างกันมากครับผม หรือถ้าใครขี้เกียจจำ และขี้เกียจ Bookmark บทความนี้ด้วย เราก็มีวิธีมาเสนอครับ นั่นคือ…

ใช้เว็บไซต์ Embed Responsively สร้างโค้ดให้เรา

เราสามารถเข้าเว็บไซต์ชื่อ EmbedResponsively ได้เลย แล้วแปะ URL วีดิโอ เว็บนี้จะสร้างโค้ด HTML และ CSS ด้านบนมาให้เราเอาไปใช้ได้เลยครับ

ข้อเสียของวิธีนี้ คือ โค้ดที่ Generate ออกมาจะเป็นการทำ Inline Style (คือการใส่ <style> เข้าไปในเว็บเลย) ซึ่งเค้าไม่แนะนำกันเพราะ Browser ไม่สามารถแคชได้อย่างมีประสิทธิภาพครับ ทำให้คนโหลดเว็บช้าลงหากมีโค้ดแบบนี้เยอะ ๆ

ใช้ CSS Framework: Bootstrap หรือ Foundation

สำหรับท่านใดที่ใช้ Bootstrap 4 หรือ Foundation ใน CSS Framework เหล่านี้มีโค้ดสำหรับตัวครอบวีดิโอให้ Responsive มาอยู่แล้วครับ โดยเราแค่กำหนดคลาสให้ตรงกับที่ Framework กำหนดมาเท่านั้นเอง

ตัวอย่างเช่น โค้ด Bootstrap 4 จะใช้คลาส “embed-responsive-16by9” เพื่อครอบวีดิโอแบบ 16:9 ครับ

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

สำหรับ Bootstrap 4: ดูได้ที่หน้า Embed ซึ่งมีคลาสที่รองรับวีดิโอหลากหลายขนาด ทั้งแบบ 21:9, 16:9, 4:3 และ 1:1

สำหรับ Foundation: ดูได้ที่หน้า Responsive Embed ซึ่งมีคลาสที่รองรับวีดิโอขนาด 16:9 และ 4:3 เรียบร้อยแล้ว ส่วนถ้าอยากได้ Ratio แปลก ๆ สามารถเพิ่มเองได้ในไฟล์ SCSS เลยครับ

ข้อดีของการใช้คลาสที่ CSS Framework กำหนดมาแล้ว คือ เราไม่ต้องใส่โค้ด CSS ซ้ำให้หนักเว็บ และเค้าทำมาให้แล้วหลายขนาด

แต่กลับกัน นี่ก็เป็นข้อเสียว่าใช้ CSS Framework แล้วมันจะมี CSS ส่วนที่เราไม่ใช้เยอะมากด้วย อันนี้แนะนำว่าให้ลบ CSS ส่วนที่ไม่ใช้ออกไปตอนเว็บขึ้นโปรดักชั่นครับ ส่วนนี้มีเครื่องมือหลายตัว เดี๋ยวเอาแชร์กันในอนาคตนะครับ

ใช้ JavaScript: jQuery Fitvids.js

วิธีสุดท้ายเป็นการใช้ JavaScript เข้ามาช่วย มีชื่อว่า FitVids.js

JavaScript เอามาคำนวณขนาดวีดิโอแบบ Dynamic ทุกครั้งที่ย่อจอหรือเปล่า… ไม่ใช่นะครับ

ตัว FitVids.js โดยเนื้อในมันคือ เป็นการสร้าง <div> ขึ้นมาครอบวีดิโอโดยใช้ CSS เหมือนเดิมนั่นเอง แต่… ความเทพของ FitVids คือ

FitVids จะคำนวณ Ratio ของวีดิโอให้อัตโนมัติ โดยดูจาก width และ height ของ <iframe> ที่เราใส่มา

เราไม่ต้องมานั่งเช็คเองว่าวีดิโอไหนขนาดเท่าไหร่ ตัว FitVids จะคิดแยกแต่ละ <iframe> ให้เลยครับ

แน่นอนว่าข้อดี คือ ความสบายของคนทำ ส่วนข้อเสีย คือ FitVids.js ต้องใช้ jQuery ร่วมด้วย ถ้าเราทำเว็บที่ไม่ได้ใช้ jQuery อยู่แล้วก็จะทำให้เว็บหนักขึ้นมาอีกครับ

สรุป การใส่วีดิโอแบบ Responsive ลงเว็บใช้วิธีไหนดี

จะเห็นว่าทุกวิธีก็คือใช้ CSS ตัวเดียวกันทั้งหมดครับ แตกต่างกันแค่

  • CSS Framework จะทำมาให้แล้วหลายขนาด
  • FitVids.js จะคิด Ratio วีดิโอให้อัตโนมัติ

เพราะฉะนั้นถ้าเราอยากให้เว็บเบา ๆ ให้ใช้วิธีแบบ CSS ธรรมดานี่แหละ

ส่วนถ้าเราใช้ CSS Framework เช่น Bootstrap 4 หรือเราใช้ jQuery อยู่แล้ว สามารถเลือกวิธีที่สะดวกกว่าข้างต้นได้ครับ

สุดท้ายนี้ ขอขอบคุณ คุณ Natch Ntp, Thanarat Kuawattanaphan, Naress Base, Puwadon Sricharoen, Chakkrisn Menn Talawat, Surasit Khamyan ที่มาแชร์วิธีดี ๆ ในการทำให้วีดิโอ Responsive เพื่อเผยแพร่เป็นประโยชน์ให้คนทำเว็บท่านอื่น ๆ ในอนาคตครับ :)

designil

designil

Data engineer & WordPress Developer ทำงานที่บริษัทแคนว่า ซิดนีย์ออสเตรเลีย ปัจจุบันเป็นเจ้าของเว็บไซต์ Designil, DataTH ชอบอ่านบทความใหม่ๆ ตลอดเวลา และชอบสรุปเรื่องราวเกี่ยวกับเทคโนโลยีให้ภาษาที่เข้าใจง่าย ยินดีที่ได้รู้จักทุกคนนะครับ
บทความทั้งหมด