สุดยอดคู่มือการใช้วิดีโอกับ Divi

วิดีโอเป็นเครื่องมือที่ทรงพลัง หากรูปภาพมีค่าหนึ่งพันคำ วิดีโอหนึ่งนาทีมีค่า 1.8 ล้านคำ (อย่างน้อยนั่นคือสิ่งที่นักวิจัย Dr. James McQuivey แนะนำ) วิดีโอเป็นเครื่องมือทางการตลาดที่มีประสิทธิภาพ และเมื่อทำถูกต้องแล้ว ก็จะเป็นเครื่องมือสำหรับการออกแบบที่สวยงาม

การเพิ่มวิดีโอลงในเว็บไซต์ของคุณเป็นเรื่องง่ายด้วย Divi โมดูลตัวเลื่อนวิดีโอและวิดีโอช่วยให้คุณสามารถเพิ่มวิดีโอที่โฮสต์โดยบุคคลที่สามเช่น youtube และ vimeo ได้เพียงแค่ป้อน URL ของวิดีโอ คุณยังสามารถเพิ่มวิดีโอที่คุณกำหนดเองได้ทั้งในรูปแบบ mp4 และ webm เพื่อให้เข้ากันได้กับเบราว์เซอร์สูงสุด นอกเหนือจากนั้น Divi ยังให้ตัวเลือกแก่คุณในการจัดสไตล์วิดีโอของคุณด้วยภาพซ้อนทับและปุ่มเล่นเพื่อช่วยให้เข้ากับการออกแบบเว็บไซต์ของคุณ

นอกจากการฝังวิดีโอบนหน้าของคุณแล้ว Divi ยังมีวิธีแก้ปัญหาง่ายๆ สำหรับการเพิ่มวิดีโอพื้นหลัง ในปัจจุบัน เมื่อคุณสร้างไซต์ด้วยตัวสร้าง Divi แต่ละส่วน แถว คอลัมน์ และ 20 จาก 37 โมดูลจะมีความสามารถวิดีโอพื้นหลัง

สำหรับคนส่วนใหญ่ การใช้วิดีโอใน Divi นั้นง่ายพอๆ กับการแทรกลิงก์ไปยังวิดีโอ YouTube หรือ Vimeo ที่คุณต้องการและเห็นปรากฏในโพสต์หรือเพจของคุณ แต่ในโพสต์นี้ เราจะพูดถึงวิธีการและเหตุผลที่ Divi ทำในสิ่งที่มันทำกับวิดีโอ เพื่อให้คุณมีอุปกรณ์ครบครันสำหรับกรณีการใช้งานพิเศษ สไตล์ที่เป็นเอกลักษณ์ หรือการทดลองเชิงสร้างสรรค์ที่คุณอาจต้องการดำเนินการ

ในคู่มือนี้เราจะพูดถึง...

• เบื้องหลังการทำงานของ Video Module และ Video Slider Module เพื่อให้คุณสามารถใช้งานได้อย่างมีประสิทธิภาพมากขึ้น
• ความแตกต่างระหว่างการโฮสต์วิดีโอด้วยตนเองและการใช้โฮสต์บุคคลที่สาม
• เคล็ดลับบางประการเกี่ยวกับการเพิ่มประสิทธิภาพวิดีโอของคุณสำหรับเว็บ
• แนวทางปฏิบัติที่ดีที่สุดสำหรับพื้นหลังวิดีโอ
• คำแนะนำทั่วไปสำหรับการเลือกขนาดวิดีโอ
• และเคล็ดลับที่เป็นประโยชน์บางประการสำหรับวิดีโอเบื้องหลัง

มาเริ่มกันเลย.

สำรวจโมดูลวิดีโอ

โมดูลวิดีโอช่วยให้คุณสามารถฝังวิดีโอลงในเพจของคุณจากแหล่งใดก็ได้ เอกสารประกอบของ Divi ในโมดูลวิดีโอจะอธิบายคุณลักษณะทั้งหมดและวิธีเพิ่มวิดีโอในหน้าของคุณ แต่สำหรับกระทู้นี้ ขอเจาะลึกนิดนึงนะครับ

การเพิ่มวิดีโอที่โฮสต์ด้วยตนเองไปยังโมดูลวิดีโอ

ในการเพิ่มวิดีโอที่โฮสต์เองด้วยโมดูลวิดีโอ คุณต้องอัปโหลดวิดีโอหรือเพิ่ม url ไปยังไฟล์วิดีโอภายในการตั้งค่าวิดีโอ และคุณต้องเพิ่มวิดีโอของคุณในรูปแบบไฟล์สองรูปแบบ

และนั่นคือทั้งหมดที่คุณต้องทำจริงๆ ง่ายพอ

อย่างไรก็ตาม เบื้องหลัง Divi ใช้องค์ประกอบวิดีโอ HTML5 เพื่อแสดงวิดีโอ เมื่อคุณเลือกที่จะเพิ่มวิดีโอที่โฮสต์เองหรืออัปโหลดวิดีโอของคุณเองโดยใช้รูปแบบ mp4 และ webm โครงสร้างของโค้ดที่ Divi ปรับใช้จะมีลักษณะดังนี้:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

นี่คือสิ่งที่ฉันต้องการจะชี้ให้เห็นว่าโค้ดนี้กำลังทำอะไรอยู่:

1. สังเกตแอตทริบิวต์การควบคุมภายในแท็ก <video> สิ่งนี้บอกให้วิดีโอแสดงการควบคุม ง่ายพอ
2. สังเกตแท็ก <source> สองแท็กภายในแท็กเปิดและปิด <video> แหล่งที่มาประกอบด้วยไฟล์วิดีโอ อันแรกเป็น mp4 และอันที่สองคือรูปแบบไฟล์ webm ทั้งสองจำเป็นสำหรับการสนับสนุนเบราว์เซอร์สูงสุด ลำดับก็มีความสำคัญเช่นกัน คุณต้องการให้เบราว์เซอร์เห็น mp4 ก่อนเนื่องจากได้รับการสนับสนุนในระดับสากลมากที่สุด ฉันจะหารือเพิ่มเติมเกี่ยวกับรูปแบบเหล่านี้ในภายหลัง
3. บรรทัดที่เขียนว่า "เกิดข้อผิดพลาดในการโหลดทรัพยากรนี้" จะแสดงขึ้นหากไม่รู้จักสองรูปแบบแรก
4. สิ่งที่คุณมองไม่เห็นคือ Divi ได้จัดรูปแบบแท็ก <video> นี้และกำหนดความกว้าง 100% เพื่อให้ตอบสนองได้ ดังนั้นวิดีโอของคุณจะปรับตามความกว้างของคอลัมน์ที่แท็กอยู่

องค์ประกอบวิดีโอ HTML5 นี้กำลังเติบโตเป็นวิธีมาตรฐานใหม่ในการแสดงวิดีโอบนเว็บ โชคดีที่ Divi ดูแลเรื่องนี้ให้เรา

การวางซ้อนภาพวิดีโอที่โฮสต์เอง

นอกเหนือจากตัวเลือกในการเพิ่มวิดีโอของคุณลงในโมดูลวิดีโอแล้ว Divi ยังให้คุณเพิ่มภาพซ้อนทับแบบกำหนดเองสำหรับวิดีโอของคุณได้

หากคุณเลือกที่จะเพิ่มภาพซ้อนทับในวิดีโอที่โฮสต์เอง คุณต้องอัปโหลดภาพของคุณเอง ตัวเลือกในการสร้างรูปภาพจากวิดีโอใช้ได้กับ URL ของวิดีโอที่โฮสต์โดยบุคคลที่สาม เช่น Youtube และ Vimeo เท่านั้น

เนื่องจากรูปภาพจะกลายเป็นขนาดของวิดีโอ และเนื่องจากวิดีโอจะปรับขนาดของคอลัมน์ที่รูปภาพตั้งอยู่ การเลือกรูปภาพขนาดที่เหมาะสมจึงเป็นสิ่งสำคัญ วิดีโอจาก Youtube, Vimeo และรูปแบบอื่นๆ ส่วนใหญ่มักมีอัตราส่วนภาพ 16:9 ดังนั้นหากคุณตั้งค่าความกว้างของเนื้อหาสูงสุดเป็นค่าเริ่มต้นของ Divi ที่ 1080px จากนั้นทำตามอัตราส่วนภาพ 16:9 วิดีโอของคุณจะมีขนาด 1080×608 ดังนั้นภาพซ้อนทับของคุณควรเป็น 1080×608 พิกเซล

ปุ่มเล่น

เมื่อตั้งค่ารูปภาพของคุณแล้ว Divi จะใช้ปุ่มเล่นแบบกำหนดเองโดยอัตโนมัติ คุณยังสามารถเปลี่ยนสีของปุ่มได้หากต้องการในการตั้งค่าวิดีโอภายใต้แท็บออกแบบ

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

การเพิ่ม URL วิดีโอที่โฮสต์โดยบุคคลที่สาม

วิธีทั่วไปในการเพิ่มวิดีโอลงในโมดูลวิดีโอคือเพียงเพิ่ม URL ของวิดีโอที่โฮสต์โดยบุคคลที่สาม เช่น Youtube หรือ Vimeo ดังนั้น แทนที่จะเพิ่มรูปแบบวิดีโอสองรูปแบบเหมือนกับที่คุณทำกับวิดีโอที่โฮสต์เอง คุณเพียงแค่เพิ่ม URL ในแถบอินพุตพื้นหลังด้านบน

เบื้องหลัง Divi เพิ่ม div wrapper ความกว้างของไหล และฝัง iframe ที่แสดงวิดีโอ iframe นี้เหมือนกับที่คุณได้รับจาก youtube โดยตรง นี่คือตัวอย่างลักษณะของโค้ดเมื่อเพิ่มวิดีโอ youtube ด้วยโมดูลวิดีโอ:

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

div ที่มีคลาส "fluid-width-video-wrapper" ล้อมรอบ iframe และให้ความกว้าง 100% เพื่อปรับความกว้างของคอนเทนเนอร์ทำให้ตอบสนองได้

หากคุณเลือกที่จะเพิ่มภาพซ้อนทับ คุณสามารถเลือกอัปโหลดภาพของคุณเองหรือเพื่อบรรเทาอาการปวดหัวเล็กน้อย คุณสามารถคลิก "สร้างจากวิดีโอ" และ Divi จะนำภาพซ้อนทับที่นำมาจากวิดีโอไปใช้โดยอัตโนมัติ คุณยังสามารถเลือกปรับแต่งปุ่มเล่นได้อีกด้วย

สำรวจโมดูลตัวเลื่อนวิดีโอ

ตัวเลื่อนวิดีโอทำงานคล้ายกับโมดูลวิดีโอในลักษณะที่วิดีโอถูกปรับใช้บนเว็บเพจ ยกเว้นตอนนี้วิดีโออยู่ในแถบเลื่อน นี่เป็นวิธีที่สะดวกในการแสดงวิดีโอในที่เดียว เพื่อให้ผู้ใช้ของคุณสามารถเลื่อนดูกลุ่มวิดีโอทีละรายการได้อย่างง่ายดาย สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับตัวเลือกโมดูลตัวเลื่อนวิดีโอ ไปที่หน้าเอกสารประกอบ

องค์ประกอบที่ฉันโปรดปรานอย่างหนึ่งของแถบเลื่อนวิดีโอคือแทร็กภาพขนาดย่อที่คุณสามารถใช้เพื่อควบคุมสไลด์ได้ ทั้งสะดวกและมีส่วนร่วม

คุณยังสามารถปรับแต่งสีของตัวควบคุมแถบเลื่อนได้จากการตั้งค่าโมดูล ซึ่งรวมถึงสีภาพซ้อนทับขนาดย่อ

รูปภาพขนาดย่อจะยังคงมีขนาดเท่ากับรูปภาพต้นฉบับที่คุณอัปโหลด ดังนั้นโปรดอย่าอัปโหลดรูปภาพขนาดใหญ่จำนวนมากในแถบเลื่อนของคุณ เนื่องจากอาจทำให้ไซต์ของคุณช้าลง อีกทั้งไม่สามารถสร้างภาพขนาดย่อโดยอัตโนมัติจากวิดีโอได้ คุณต้องอัปโหลดข้อมูลเหล่านั้นด้วยตัวเอง

ภาพขนาดย่อจะใช้อัตราส่วน 4:3 ดังนั้นเพื่อปรับภาพตัวเลื่อน 16:9 ภาพจะระเบิดและตัดด้านขวาและด้านซ้ายของภาพออกเพื่อให้ครอบคลุมพื้นที่ทั้งหมด

เคล็ดลับการออกแบบ : เคล็ดลับ หนึ่งที่คุณสามารถทำได้เพื่อลดขนาดไฟล์และป้องกันไม่ให้ภาพขนาดย่อของคุณตัดบางส่วนของภาพคือการปรับแต่งภาพขนาดย่อของคุณให้เป็น 253 × 190 พิกเซล (อัตราส่วน 4:3) และเลือกตัวเลือกที่จะซ่อน แสดงภาพซ้อนทับบนวิดีโอหลัก ด้วยวิธีนี้ ภาพซ้อนทับของคุณจะถูกใช้สำหรับภาพขนาดย่อเท่านั้น ดังนั้นจึงไม่จำเป็นต้องมีขนาดใหญ่กว่านี้เพื่อปรับขนาดวิดีโอหลัก

4 เคล็ดลับสำคัญสำหรับการโฮสต์วิดีโอของคุณด้วยตนเอง

1. ใช้ CDN หากคุณกำลังคิดที่จะเพิ่มวิดีโอของคุณผ่าน WordPress Media Library ให้คิดใหม่อีกครั้ง แม้ว่าจะเป็นไปได้ที่จะโฮสต์วิดีโอบน WordPress ของคุณเองที่ติดตั้งบนเซิร์ฟเวอร์ของคุณเอง แต่คุณอาจพบข้อจำกัดบางประการเกี่ยวกับแบนด์วิดท์ ขนาดไฟล์ พื้นที่จัดเก็บ ฯลฯ ... ซึ่งอาจทำให้เวลาในการโหลดของไซต์ลดลงและส่งผลให้สตรีมวิดีโอล่าช้า . ฉันจะพิจารณาโฮสต์วิดีโอของคุณในบริการภายนอกเช่น Amazons3 ซึ่งจะช่วยในเรื่องเวลาในการโหลดหน้า นอกจากนี้ ผู้ให้บริการบางรายยังมีระดับการรักษาความปลอดภัยเพื่อป้องกันไม่ให้ผู้อื่นดาวน์โหลดวิดีโอของคุณ (หรืออย่างน้อยก็ทำให้การดาวน์โหลดยากขึ้น)
2. ปรับไฟล์ให้เหมาะสมสำหรับเว็บ วิดีโอใช้แบนด์วิดท์มาก โดยเฉพาะอย่างยิ่งเมื่อคุณใช้พื้นหลังวิดีโอขนาดใหญ่ คุณจะต้องระมัดระวังไม่ให้เพจของคุณโอเวอร์โหลด มีหลายปัจจัยที่ควรพิจารณาหากคุณต้องการเพิ่มประสิทธิภาพวิดีโอของคุณสำหรับเว็บอย่างเหมาะสม นี่คือสมการที่เป็นประโยชน์ในการพิจารณา:
   ขนาดไฟล์ = บิตเรต (กิโลบิตต่อวินาที) x ระยะเวลา (ความยาวของวิดีโอเป็นวินาที)

   ดังนั้น หากต้องการขนาดไฟล์ที่เล็กลง คุณจะต้องลดระยะเวลา (ความยาววิดีโอ) และ/หรืออัตราบิต (จำนวนกิโลบิตต่อวินาทีที่ส่ง) อัตราบิตควรต่ำกว่าความเร็วในการเชื่อมต่อของผู้ใช้เสมอ เมื่อพิจารณาจากความเร็วอินเทอร์เน็ตทั่วโลกจะอยู่ที่ประมาณ 7 Mbps (สหรัฐฯ อยู่ที่ประมาณ 18 Mbps) คุณจะต้องรักษาอัตราบิตให้ต่ำกว่าเพื่อหลีกเลี่ยงไม่ให้การสตรีมหยุดชะงัก

   คุณไม่จำเป็นต้องทำทั้งหมดนี้ด้วยตัวเอง มีเครื่องมือฟรีดีๆ มากมายที่จะช่วยคุณในการบีบอัดวิดีโอ เช่น เบรกมือ

   ฉันแนะนำให้อ่าน “5 วิธีที่ดีที่สุดในการลดขนาดวิดีโอเพื่อการโหลดที่เร็วขึ้น” หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพวิดีโอของคุณสำหรับเว็บ มีแหล่งข้อมูลที่ยอดเยี่ยมและคำอธิบายที่ดีเกี่ยวกับวิธีใช้เบรกมือ

3. เพิ่มรูปแบบไฟล์ที่ถูกต้อง
   ดังที่ได้กล่าวไว้ก่อนหน้านี้ หากคุณโฮสต์วิดีโอด้วยตนเอง (ไม่ต้องอาศัยบุคคลที่สามในการโฮสต์ให้คุณเช่น Youtube) คุณจะต้องเพิ่มวิดีโอของคุณในรูปแบบ mp4 และ webm

   ปัจจุบัน Mp4 เป็นรูปแบบที่ได้รับการสนับสนุนอย่างกว้างขวางที่สุด เนื่องจากยังคงเล่นเบราว์เซอร์เก่าบางตัวโดยใช้แฟลช และเป็นมาตรฐานสำหรับการสนับสนุนเบราว์เซอร์บนมือถือ Divi แสดงรายการ mp4 ก่อนในรหัสเพื่อให้อุปกรณ์ iOS สามารถจดจำไฟล์ได้ทันที

   Webm เป็นรูปแบบที่สนับสนุนมากที่สุดเป็นอันดับสอง มันถูกสร้างขึ้นสำหรับเว็บและดูเหมือนว่าจะอยู่ที่นี่ต่อไป มันสร้างการสตรีมคุณภาพสูงพร้อมการบีบอัดที่ยอดเยี่ยม และเป็นโอเพ่นซอร์ส

   เมื่อรวมกันแล้ว ทั้งสองจะสนับสนุนเว็บเบราว์เซอร์ส่วนใหญ่รวมถึงอุปกรณ์เคลื่อนที่

   เครื่องมือแปลงฟรีที่ยอดเยี่ยมคือ VLC media player

4. กำหนดประเภท MIME: เพื่อให้รูปแบบวิดีโอ WEBM ทำงานได้ในทุกเบราว์เซอร์ เซิร์ฟเวอร์ของคุณต้องกำหนดประเภท MIME ที่ถูกต้อง คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ .htaccess เพื่อกำหนดประเภท MIME ได้ที่นี่ หากคุณสังเกตเห็นว่าวิดีโอของคุณไม่ได้เล่นในเบราว์เซอร์บางตัว อาจเป็นเพราะเหตุนี้ ในการเพิ่มประเภท MIME ให้กับไฟล์ .htaccess ของคุณ ให้ใช้ไคลเอนต์ FTP (เช่น FileZilla) เพื่อเข้าถึงไฟล์รูทของ WordPress คุณควรพบไฟล์ .htaccess ของคุณที่นั่น เปิดไฟล์ในโปรแกรมแก้ไขข้อความ ด้านล่างบรรทัดที่ระบุว่า “#END WordPress” เพิ่มสิ่งต่อไปนี้:

   AddType วิดีโอ/mp4 .mp4 .m4v
   เพิ่มประเภทวิดีโอ/ogg .ogv
   AddType วิดีโอ/webm .webm

   

   จากนั้นบันทึกไฟล์. ตอนนี้รูปแบบวิดีโอของคุณจะเป็นที่รู้จักในทุกเบราว์เซอร์

การโฮสต์ด้วยแพลตฟอร์มบุคคลที่สาม (YouTube และ Vimeo)

หากคุณพบว่าการแปลงและบีบอัดวิดีโอของคุณเป็นงานที่มากเกินไป คุณสามารถปล่อยให้บุคคลที่สามทำงานให้คุณได้เสมอ

หากคุณไม่รู้อะไรเกี่ยวกับวิดีโอ ฉันขอแนะนำให้ใช้เส้นทางนี้ หากคุณไม่ได้คลั่งไคล้ข้อจำกัดของ youtube หรือ vimeo ฟรี คุณสามารถกัดสัญลักษณ์แสดงหัวข้อย่อยสำหรับ Vimeo Pro มันอาจจะคุ้มค่าที่จะปวดหัวในระยะยาว สิ่งที่คุณไม่ต้องการคือการใส่วิดีโอบนเว็บไซต์ของคุณที่ช้าลงหรือดูไม่ดี มันไม่คุ้มค่าเลย

แพลตฟอร์มวิดีโอของบุคคลที่สามที่รองรับโดยโมดูลตัวเลื่อนวิดีโอและวิดีโอ

หากคุณต้องการใช้โมดูลตัวเลื่อนวิดีโอและตัวเลื่อนวิดีโอเพื่อเพิ่มวิดีโอของบุคคลที่สาม คุณสามารถใช้แพลตฟอร์มยอดนิยมต่อไปนี้:

• Youtube
• Vimeo
• Dailymotion

วิธีเพิ่มวิดีโอของบุคคลที่สามโดยใช้ Divi

หากต้องการเพิ่มวิดีโอจากแพลตฟอร์มเหล่านี้ คุณจะต้องไปที่ไซต์ของพวกเขาเพื่อรับลิงก์แชร์

จากนั้นคุณสามารถวางลงในโมดูล Video หรือ Video Slider

คลิกปุ่ม "สร้างจากวิดีโอ" เพื่อเพิ่มภาพซ้อนทับ หรืออัปโหลดของคุณเอง

บันทึกการตั้งค่า. และนั่นแหล่ะ

โปรดทราบว่า Divi นั้นสร้างขึ้นบน WordPress ดังนั้นคุณจึงสามารถฝังวิดีโอจากแพลตฟอร์มบุคคลที่สามได้ตลอดเวลาโดยใช้โค้ดสำหรับฝังที่แนะนำโดยไม่ต้องใช้โมดูลวิดีโอ เพียงเพิ่มโมดูลข้อความและป้อนโค้ดสำหรับฝังลงในกล่องเนื้อหา

คุณอาจต้องปรับแต่งความกว้างและความสูงสำหรับการฝังของคุณเพื่อปรับเลย์เอาต์ที่ตอบสนอง

วิสเทียล่ะ?

Wistia เป็นแพลตฟอร์มที่ทรงพลังที่ผู้คนจำนวนมากใช้ แต่น่าเสียดายที่มันเล่นได้ไม่ดีกับโมดูล Divi ในปัจจุบัน อย่างไรก็ตาม คุณสามารถฝัง Wistia ได้โดยใช้โค้ดสำหรับฝังที่มีให้

การวางโค้ดนั้นในส่วนเนื้อหาบนไซต์ Divi ของคุณจะแสดงวิดีโอ

คุณยังสามารถวางโค้ดลงในส่วนเนื้อหาของโมดูลตัวเลื่อนเพื่อเพิ่มวิดีโอ wistia เป็นหนึ่งในสไลด์ของคุณ อย่างไรก็ตาม คุณจะต้องปรับ CSS บางส่วนเพื่อให้มีลักษณะตามที่คุณต้องการ

การใช้พื้นหลังวิดีโอกับ Divi

คุณควรใช้พื้นหลังวิดีโอหรือไม่?

ก่อนที่เราจะลงรายละเอียดเกี่ยวกับพื้นหลังของวิดีโอ คุณควรถามตัวเองอย่างตรงไปตรงมาว่าควรใช้พื้นหลังนี้หรือไม่ อย่าเข้าใจฉันผิด ฉันชอบวิดีโอพื้นหลังที่ดี แต่บางครั้งมันก็ไม่สมเหตุสมผล อย่าพลาดเด็ดขาด วิดีโอจะทำให้ไซต์ของคุณช้าลงและอาจทำให้เนื้อหาของคุณเสียสมาธิ ดังนั้นอย่าเลือกพื้นหลังของวิดีโอแทนภาพที่มีประสิทธิภาพมากกว่า ไซต์ของคุณอาจจะดีขึ้นถ้าไม่มี

แต่มีบางครั้งที่วิดีโอเป็นทางออกที่ดีกว่ารูปภาพ เมื่อทำถูกต้อง พื้นหลังวิดีโอจะทำให้เนื้อหาของคุณมีชีวิตชีวา ดังนั้น ทำให้วิดีโอของคุณมีจุดมุ่งหมายและทำให้มันสำคัญ

ความสามารถเบื้องหลังวิดีโอภายใน Divi

คุณสามารถเพิ่มพื้นหลังวิดีโอได้เกือบทุกที่ที่ต้องการโดยใช้ Divi Builder คุณสามารถเพิ่มพื้นหลังวิดีโอให้กับแต่ละส่วน แถว และคอลัมน์ได้ คุณสามารถเพิ่มพื้นหลังวิดีโอให้กับโมดูลส่วนใหญ่ได้
นี่คือโมดูลที่รองรับพื้นหลังวิดีโอ

• ส่วนหัวแบบเต็มความกว้าง (ใช้งานได้กับตัวเลือกเต็มหน้าจอด้วย)
• เมนูเต็มความกว้าง
• ผลงานเต็มความกว้าง
• ตัวเลื่อนโพสต์แบบเต็มความกว้าง (เมื่อไม่ได้ใช้รูปภาพเด่น คุณสามารถใช้พื้นหลังวิดีโอเพื่อใช้เป็นพื้นหลังสำหรับสไลด์ทั้งหมดได้)
• ชื่อบทความแบบเต็มความกว้าง
• Fullwidth Slider (ใช้ได้กับแต่ละสไลด์)
• โมดูลเสียง
• เคาน์เตอร์บาร์
• Blurb Module – เพียงตรวจสอบให้แน่ใจว่าได้เพิ่มช่องว่างภายในให้กับโมดูล
• โมดูลเรียกร้องให้ดำเนินการ
• นาฬิกาจับเวลาถอยหลัง
• อีเมล Optin
• ผลงานที่กรองได้
• โมดูลเข้าสู่ระบบ
• โมดูลตัวนับจำนวน
• โมดูลบุคคล
• การตั้งค่าผลงาน
• ตัวเลื่อนโพสต์ (เมื่อไม่ได้ใช้รูปภาพเด่น คุณสามารถใช้พื้นหลังวิดีโอเพื่อใช้เป็นพื้นหลังสำหรับสไลด์ทั้งหมดได้)
• ชื่อกระทู้
• ตารางราคา (คุณสามารถตั้งค่าพื้นหลังวิดีโอสำหรับโมดูลและสำหรับตารางต่างๆ แยกกันได้)
• ตัวเลื่อน (สำหรับพื้นหลังของแต่ละสไลด์เท่านั้น)
• แท็บ (สำหรับทั้งพื้นหลังโมดูลและแต่ละแท็บ)
• ข้อความรับรอง
• ข้อความ
• สลับ

คลังวิดีโอสต็อก

ส่วนที่ยากในการเพิ่มพื้นหลังวิดีโอลงในไซต์ของคุณคือการค้นหารูปภาพที่ถูกต้องและต้องแน่ใจว่ามีขนาดที่เหมาะสม โชคดีที่คุณไม่จำเป็นต้องสร้างพื้นหลังวิดีโอที่กำหนดเอง มีคลังวิดีโอสต็อกปลอดค่าลิขสิทธิ์ที่อาจใช้งานได้ดีสำหรับเว็บไซต์ของคุณ หากคุณกำลังมองหาฟุตเทจวิดีโอฟรี จุดเริ่มต้นที่ดีคือ video, coverr หรือ videoeezy หากคุณกำลังมองหาเวอร์ชันจ่ายที่มีคุณภาพดีกว่า คุณสามารถตรวจสอบ videohive, videoblocks หรือ pond5 ไซต์เหล่านี้บางแห่งใช้พื้นหลังวิดีโอได้ดีมากหากคุณกำลังมองหาแรงบันดาลใจ

วิธีเพิ่มพื้นหลังวิดีโอในหน้าของคุณ

หลังจากที่คุณพบ (หรือสร้าง) วิดีโอที่ใช่แล้ว สิ่งต่างๆ จะง่ายขึ้นมาก หากต้องการเพิ่มพื้นหลังของวิดีโอลงในเว็บเพจ Divi ของคุณ เพียงปรับใช้ตัวสร้างภาพและค้นหาส่วนที่คุณต้องการเพิ่มวิดีโอแล้วคลิกไอคอนการตั้งค่าส่วน

ใต้แท็บเนื้อหา ให้คลิกไอคอน/แท็บรูปภาพพื้นหลังใต้ตัวเลือกพื้นหลัง หากคุณมีวิดีโอที่โฮสต์เอง ให้ป้อนทั้งรูปแบบ mp4 และ webm จากนั้นป้อนขนาดของวิดีโอเพื่อให้ Divi รู้วิธีปรับขนาดอย่างเหมาะสม

ตอนนี้ไปที่แท็บภาพพื้นหลังและเพิ่มภาพพื้นหลังที่จะใช้เป็นทางเลือกที่ดีสำหรับอุปกรณ์มือถือ

จากนั้นบันทึกการตั้งค่า มันง่ายมาก

หากคุณกำลังวางแผนที่จะใช้วิดีโอที่คุณโฮสต์บน youtube (หรือ vimeo) เป็นพื้นหลัง ขณะนี้ยังไม่สามารถทำได้ภายในเครื่องมือสร้าง Divi จำไว้ว่าคุณต้องการวิดีโอเหล่านี้ในรูปแบบที่ถูกต้องเพื่อแสดงบนเบราว์เซอร์ทั้งหมด อย่างไรก็ตาม คุณสามารถดาวน์โหลดวิดีโอ Youtube นั้นได้ (หากเป็นของคุณ) และแปลงเป็นรูปแบบ mp4 และ webm เพื่อใช้กับพื้นหลังของคุณ

เคล็ดลับการออกแบบพื้นหลัง: การใช้พื้นหลังวิดีโอสำหรับตัวเลื่อนโพสต์แบบเต็มความกว้าง

หากคุณกำลังมองหาวิธีที่สร้างสรรค์ในการแสดงโพสต์เด่นบนหน้าบล็อกของคุณ คุณสามารถเพิ่มพื้นหลังวิดีโอลงในแถบเลื่อนโพสต์ได้ ให้ฉันแสดงให้คุณเห็นว่าฉันหมายถึงอะไร

ไปที่หน้าของคุณโดยใช้ Visual Builder และเพิ่มส่วนเต็มความกว้างที่ด้านบนของหน้าด้วยโมดูลตัวเลื่อนโพสต์แบบเต็มความกว้าง

ใต้แท็บเนื้อหา ใต้แสดงรูปภาพเด่น เลือก "ไม่"

จากนั้นในส่วนพื้นหลัง ให้เลือกแท็บพื้นหลังของวิดีโอและเพิ่มรูปแบบวิดีโอของคุณทั้งสองแบบพร้อมกับขนาด

เป็นความคิดที่ดีที่จะเพิ่มภาพพื้นหลังเป็นทางเลือกสำหรับอุปกรณ์เคลื่อนที่ที่ไม่สามารถแสดงพื้นหลังของวิดีโอได้

แค่นั้นแหละ.

ตอนนี้ผู้ใช้สามารถเลื่อนดูแถบเลื่อนโพสต์เด่นของคุณด้วยวิดีโอพื้นหลังสุดเจ๋ง เพียงตรวจสอบให้แน่ใจว่าพื้นหลังของวิดีโอมีความละเอียดอ่อนพอที่จะไม่เบี่ยงเบนความสนใจจากเนื้อหา

แนวทางปฏิบัติที่ดีที่สุดสำหรับพื้นหลังวิดีโอ

ด้วยความเป็นไปได้ทั้งหมดที่มีในพื้นหลังวิดีโอ ฉันคิดว่าควรรวมแนวทางปฏิบัติที่ดีที่สุดทั่วไปไว้ด้วย

1. รวมภาพพื้นหลังไว้เป็นทางเลือกสำหรับอุปกรณ์เคลื่อนที่เสมอ อุปกรณ์เคลื่อนที่จะไม่เล่นวิดีโอขนาดใหญ่โดยอัตโนมัติ นี่คือเหตุผลที่ Divi แสดงภาพสำรองตามค่าเริ่มต้นบนอุปกรณ์มือถือ
2. ใช้วิดีโอขนาดเล็ก สำหรับวิดีโอแบ็คกราวด์ คุณสามารถใช้ความละเอียด 720p ได้ เนื่องจากแบ็คกราวด์มีความสำคัญต่อเนื้อหา/ข้อความที่ซ้อนทับวิดีโอ คุณภาพจะไม่ประสบมากจนคุณจะสังเกตเห็น
3. พิจารณาภาพซ้อนทับ การเพิ่มการซ้อนทับสีแบบกึ่งโปร่งใสที่ด้านบนของวิดีโอจะช่วยให้คุณหลีกเลี่ยงไฟล์ที่มีขนาดเล็กลง เนื่องจากจะซ่อนรายละเอียดที่ยุ่งเหยิงของวิดีโอที่มีคุณภาพน้อยลง นอกจากนี้ยังจะทำให้ข้อความของคุณโดดเด่นยิ่งขึ้น
4. อย่าใช้เสียง คุณไม่จำเป็นต้องมีเสียงสำหรับพื้นหลังวิดีโอ ดังนั้นให้นำออก สิ่งนี้จะลดขนาดไฟล์
5. ใช้ทั้งรูปแบบ mp4 และ webm สำหรับการสนับสนุนข้ามเบราว์เซอร์

หยุดวิดีโอชั่วคราว?

คุณอาจเคยเห็นตัวเลือกนี้อยู่ในการตั้งค่าภายใต้ตัวเลือกพื้นหลัง

ในบางกรณี วิดีโออาจขัดแย้งกับเสียงที่เล่นเป็นพื้นหลังของวิดีโออื่น ตัวเลือกนี้ช่วยให้เล่นวิดีโอได้ครั้งละหนึ่งเสียงเท่านั้น

Divi วิดีโอ Hacks

มีการปรับแต่งพื้นหลังวิดีโอและวิดีโอขั้นสูงอีกสองสามรายการที่คุณอาจพบว่ามีประโยชน์ นี่คือบางส่วน

ปรับขนาดปุ่มเล่นของคุณ

หากคุณต้องการเปลี่ยนขนาดของปุ่มเล่น ให้ไปที่การตั้งค่าโมดูลวิดีโอ ใต้แท็บขั้นสูง แล้วป้อน CSS ที่กำหนดเองต่อไปนี้ในกล่องที่ระบุว่า "ไอคอนวิดีโอ":

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

คุณสามารถปรับค่าให้มีขนาดที่คุณต้องการ เพียงตรวจสอบให้แน่ใจว่าขนาดแบบอักษรและความสูงของบรรทัดยังคงเหมือนเดิม และระยะขอบบนและระยะขอบล่างยังคงเป็นค่าลบที่เท่ากับครึ่งหนึ่งของขนาดแบบอักษรเสมอ ตัวอย่างเช่น หากคุณต้องการทำให้เล็กลง ค่าก็จะเป็น

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

วิธีหยุดพื้นหลังวิดีโอจากการหยุดชั่วคราวบน Click

ในบางกรณี คุณอาจพบว่าการคลิกบนพื้นหลังวิดีโอจะหยุดวิดีโอชั่วคราว คุณสามารถปิดใช้งานคุณลักษณะนี้โดยเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในไฟล์ style.css ในธีมย่อยของคุณ (หรือในเครื่องมือปรับแต่งธีม > CSS เพิ่มเติม):

.et_pb_section_video_bg video {
pointer-events: none;
}

วิธีหยุดพื้นหลังวิดีโอจากการวนซ้ำ

คุณอาจจำเคล็ดลับนี้ได้จากโพสต์เก่าของเรา โดยค่าเริ่มต้น พื้นหลังของวิดีโอจะยังคงวนซ้ำ นี่เป็นจุดประสงค์เพราะปกติแล้วเป็นสิ่งที่คุณต้องการให้พื้นหลังวิดีโอทำ แต่ถ้าคุณเพียงต้องการแสดงวิดีโอพื้นหลังของคุณเพียงครั้งเดียวแล้วออก คุณสามารถปิดใช้งานการทำงานวนซ้ำได้โดยไปที่ Divi > ตัวเลือกธีม > Integration และป้อนข้อมูลต่อไปนี้ใน:

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

ขนาดวิดีโอสำหรับ Divi

ฉันไม่ต้องการจบโพสต์โดยไม่พูดถึงขนาดวิดีโอ ไม่มีกฎเกณฑ์ที่แน่ชัดว่าควรใช้มิติใดเมื่อพิจารณาว่าวิดีโอและเว็บไซต์ทั้งหมดแตกต่างกัน วิดีโอ 720p (1280 × 720) อาจดูดีมากเมื่อยืดบนหน้าจอ 1920 × 1080 ในขณะที่อีกวิดีโอจะดูน่ากลัว เมื่อตัดสินใจเกี่ยวกับขนาดหรือความละเอียดของวิดีโอสำหรับไซต์ของคุณ คุณสามารถทำตามขนาดรูปภาพสำหรับเค้าโครงคอลัมน์และโมดูลของ Divi เพื่อเป็นแนวทางทั่วไป พูดง่ายๆ คือ วิดีโอของคุณควรใกล้กับความกว้างของคอลัมน์มากที่สุดโดยไม่ต้องเข้าไป ดังนั้น หากคุณมีคอลัมน์ขนาดเต็มความกว้างที่มีความกว้างสูงสุด 1080px คุณก็ไม่จำเป็นต้องใช้วิดีโอที่มีความละเอียดมากกว่า 720p (1280×720) อย่างไรก็ตาม หากคุณใช้พื้นหลังวิดีโอที่ขยายเต็มความกว้างของเบราว์เซอร์ คุณอาจต้องเพิ่มเป็น 1080p (1920×1080) เพื่อที่ว่าเมื่อขยายความกว้างเต็มความกว้างของเบราว์เซอร์บนจอภาพขนาดใหญ่ ดูเป็นเม็ดเล็ก

หากคุณกำลังจะใช้ผู้เชี่ยวชาญด้านวิดีโอบุคคลที่สามเพื่อเตรียมวิดีโอของคุณสำหรับเว็บ ต่อไปนี้คือรายการความละเอียดวิดีโอที่แนะนำสำหรับ youtube

2160p: 3840×2160
1440p: 2560×1440
1080p: 1920×1080
720p: 1280×720
480p: 854×480
360p: 640×360
240p: 426×240

ซึ่งเป็นไปตามอัตราส่วนภาพ 16:9 ดังนั้นคุณจะไม่เห็นแถบสีดำที่ด้านข้างของวิดีโอ

Vimeo ยังให้แนวทางสำหรับวิดีโอ ฉันชอบโพสต์ของ Vimeo เกี่ยวกับพื้นฐานการบีบอัดวิดีโอเป็นพิเศษ

ความคิดสุดท้าย

วิดีโอจะยังคงเป็นส่วนสำคัญของประสบการณ์ออนไลน์ของเราเป็นเวลานาน ดังนั้นจึงเป็นสิ่งสำคัญที่คุณจะต้องรู้ว่าคุณกำลังทำอะไรอยู่เมื่อเพิ่มวิดีโอลงในเว็บไซต์ของคุณ หากคุณตัดสินใจที่จะใช้วิดีโอในเว็บไซต์ของคุณ Divi จะทำให้กระบวนการนี้ง่ายมาก โดยมอบโซลูชันข้ามเบราว์เซอร์สำหรับวิดีโอที่โฮสต์เองและโซลูชันที่สะดวกสำหรับการฝังของบุคคลที่สาม แต่ Divi ไม่สามารถทำทุกอย่างให้คุณได้ หวังว่าโพสต์นี้จะช่วยคุณในกระบวนการเลือกวิดีโอที่เหมาะสมและเตรียมสำหรับเว็บ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น