วิธีเพิ่มพื้นหลังวิดีโอลงในไซต์ WordPress

กำลังค้นหาวิธีที่ง่ายที่สุดในการ เพิ่มพื้นหลังวิดีโอ WordPress หรือไม่?

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

อ่านต่อเพื่อเรียนรู้เกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดและขั้นตอนในการเพิ่มพื้นหลังวิดีโอลงในเว็บไซต์ WordPress ของคุณ ทั้งหมดนี้ไม่มีความรู้ด้านเทคนิคพิเศษใดๆ

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

• รักษาขนาดไฟล์ให้ต่ำแต่มีความละเอียดสูง: ไม่มีอะไรมาขัดขวางประสิทธิภาพของไซต์ของคุณมากไปกว่าวิดีโอและรูปภาพขนาดใหญ่ แต่ควรรักษาความละเอียดไว้ระหว่างการบีบอัด
• อย่าหักโหมจนเกินไป: วิดีโอจำนวนมากเกินไปทำให้อินเทอร์เฟซของคุณยุ่งเหยิง ใช้เฉพาะเพื่อชี้ประเด็นหรือแสดงสิ่งที่เกี่ยวข้องเท่านั้น
• รวมคำกระตุ้นการตัดสินใจพร้อมข้อมูลเพิ่มเติม: อย่าปล่อยให้ผู้ดูต้องการมากกว่านี้ แล้วลืมลิงก์ที่นำไปสู่รายละเอียดเพิ่มเติม
• หลีกเลี่ยงเสียงในทุกกรณี: เป็นเรื่องที่น่าตกใจเมื่อทุกคนต้องการดูเว็บไซต์ของคุณ
• หากจำเป็นต้องมีเสียง อย่าเปิดเล่นอัตโนมัติ: ให้ตัวเลือกสำหรับผู้ใช้ในการเล่นเสียง
• พิจารณาคำบรรยายสำหรับวิดีโอที่มีเสียง: ไม่ใช่ทุกคนที่สามารถฟังเสียงของคุณได้ ไม่ว่าจะเป็นเพราะตำแหน่งของพวกเขาหรือความบกพร่องทางการได้ยิน
• โฮสต์ภายนอก: โฮสต์ไซต์ของคุณอาจไม่ได้ออกแบบมาเพื่อให้บริการวิดีโอ ดังนั้นให้เลือกไซต์เช่น Vimeo และ YouTube เพื่อรักษาประสิทธิภาพ หรือพิจารณาไซต์โฮสต์วิดีโอพิเศษ
• ยึดรูปแบบ/ความละเอียดที่ดีที่สุด: เรากำลังพูดถึง MP4 เท่านั้น; ขั้นต่ำ 720p; ตัวแปลงสัญญาณ h264

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

วิธีเพิ่มพื้นหลังวิดีโอ WordPress

มีหลายวิธีที่จะเปิดใช้งานคุณสมบัติพื้นหลังของวิดีโอใน WordPress

เราจะมุ่งเน้นไปที่สี่โซลูชันที่ปราศจากโค้ดที่แตกต่างกัน:

1. บล็อกปกในตัว
2. ปลั๊กอินพื้นหลัง/ส่วนหัว
3. ปลั๊กอินตัวสร้างเพจที่คุณชื่นชอบ
4. การใช้ธีมที่รองรับพื้นหลังหรือส่วนหัวของวิดีโอ

ทำตามขั้นตอนสำหรับแต่ละวิธีด้านล่าง

ตัวเลือกที่ 1: บล็อกปกในตัว

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

สิ่งที่ผู้ใช้ WordPress หลายคนไม่รู้ก็คือ Cover block ยังรองรับพื้นหลังของวิดีโออีกด้วย

ขั้นตอนที่ 1: เพิ่มบล็อคหน้าปก

ในการเริ่มต้น ไปที่หน้าใดก็ได้ที่คุณต้องการเพิ่มพื้นหลังและเพิ่มบล็อก หน้าปก

ขั้นตอนที่ 2: อัปโหลดวิดีโอของคุณ

สำหรับ ปก ให้เลือกปุ่ม อัปโหลด หรือ คลังสื่อ แล้วแต่ว่าคุณต้องการใช้ปุ่มใดเพื่อเพิ่มวิดีโอ

บล็อก หน้าปก ไม่ได้บอกอะไรเกี่ยวกับการสนับสนุนวิดีโอ ดังนั้นคุณต้องแน่ใจว่าได้เลือกวิดีโอ (เช่น MP4) จาก Media Library คลิกปุ่ม เลือก เมื่อคุณทำเครื่องหมายที่วิดีโอแล้ว

ขั้นตอนที่ 3: แทรกเนื้อหาพื้นหน้าที่วางซ้อน

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

ขั้นตอนที่ 4: แก้ไขการตั้งค่าหน้าปกตามต้องการ

การตั้งค่าหน้าปกรวมถึง:

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

ขั้นตอนที่ 5: ดูพื้นหลังวิดีโอ WordPress ของคุณในการดำเนินการ

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

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

นี่คือปลั๊กอินพื้นหลังวิดีโอที่ดีที่สุด:

️ รายการโปรดของเราคือปลั๊กอิน WordPress พื้นหลังขั้นสูง เราจะแสดงวิธีเพิ่มพื้นหลังวิดีโอ WordPress ด้วยปลั๊กอินนั้นในไม่กี่ขั้นตอน

ขั้นตอนที่ 1: ติดตั้ง AWB และเพิ่มบล็อกเนื้อหา

ในการเริ่มต้น ให้ติดตั้งพื้นหลัง WordPress ขั้นสูง (AWB)

ไปที่หน้าที่คุณต้องการเพิ่มวิดีโอพื้นหลัง

ใช้ตัวแก้ไข WordPress คลิกเพื่อเพิ่มบล็อกเนื้อหา ค้นหาและเลือกบล็อก พื้นหลัง (AWB)

ขั้นตอนที่ 2: เพิ่มวิดีโอของคุณ

ซึ่งจะให้ตัวเลือกแก่คุณในการเพิ่มสี รูปภาพ หรือพื้นหลังวิดีโอให้กับองค์ประกอบ

เลือก วิดีโอ จากนั้นวาง URL ของวิดีโอจาก YouTube หรือ Vimeo ปลั๊กอินมีแท็บ Self Hosted สำหรับการอัปโหลดวิดีโอในเครื่อง

ขั้นตอนที่ 3: ขยายความสูงและความกว้างของพื้นหลังวิดีโอ

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

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

ขั้นตอนที่ 4: แก้ไขการตั้งค่าพื้นหลังวิดีโอ WordPress

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

ควรเพิ่มการซ้อนทับสีพื้นหลังด้วยความทึบที่ลดลง ทำให้อ่านข้อความที่วางซ้อนได้ง่ายขึ้น

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

ขั้นตอนที่ 5: ดูผลลัพธ์

ผลลัพธ์ที่ได้คือวิดีโอที่เล่นหน้าเนื้อหาอื่นๆ ซึ่งควรเป็นแบบวนซ้ำ ไม่มีเสียง และยังคงเน้นที่เนื้อหาพื้นหน้าเป็นส่วนใหญ่

ตัวเลือก 3: ปลั๊กอินตัวสร้างเพจที่คุณชื่นชอบ

ผู้สร้างเพจส่วนใหญ่ เช่น Elementor, WPBakery และ Divi เสนอคุณสมบัติพื้นหลังเพื่อเพิ่มรูปภาพหรือพื้นหลังวิดีโอให้กับโมดูลเนื้อหาเกือบทั้งหมด

️ รู้สึกอิสระที่จะเลือกตัวสร้างเพจที่คุณชอบ แต่เราขอแนะนำ Elementor เนื่องจากใช้งานง่าย

อย่าลืมติดตั้ง Elementor หรือตัวสร้างใดก็ตามที่คุณต้องการใช้ก่อนเริ่มต้น

ขั้นตอนที่ 1: เปิดหน้าด้วยตัวแก้ไข Elementor

ไปที่ เพจ บน WordPress และเลือกเพจที่กำหนดให้เป็น โฮมเพจ ของคุณ คลิกปุ่ม แก้ไขด้วย Elementor

ขั้นตอนที่ 2: เพิ่มบล็อกเนื้อหาของส่วน

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

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

ขั้นตอนที่ 3: ใส่พื้นหลังวิดีโอของคุณ

ที่นี่ คุณจะเห็นพื้นที่ดรอปดาวน์ พื้นหลัง เลือกตัวเลือกวิดีโอถัดจาก ประเภท พื้นหลัง จากนั้นวาง URL จาก YouTube, Vimeo หรือไฟล์ในเครื่องในช่อง Video Link

ขั้นตอนที่ 4: แก้ไขการตั้งค่าพื้นหลังของวิดีโอ

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

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

• เวลาเริ่มต้น
• เวลาสิ้นสุด
• เล่นครั้งเดียว
• เล่นบนมือถือ
• โหมดความเป็นส่วนตัว

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

ขั้นตอนที่ 5: ดูพื้นหลังวิดีโอ WordPress ที่ส่วนหน้า

เมื่อเสร็จแล้ว วิดีโอจะเล่นตามเนื้อหาทั้งหมดในส่วนนี้!

ตัวเลือกที่ 4: ใช้ธีม WordPress ที่รองรับพื้นหลัง/ส่วนหัวของวิดีโอ

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

หากต้องการค้นหาธีมที่มีคุณลักษณะพื้นหลังของวิดีโอ ให้ค้นหา "พื้นหลังวิดีโอ" ในตลาดกลางยอดนิยม:

️ อย่าลืมสแกนรายการคุณสมบัติ หรือแม้แต่ถามผู้พัฒนาก่อนดาวน์โหลด/ซื้อ เพื่อให้แน่ใจว่าธีมมีฟังก์ชันพื้นหลังวิดีโอ

ตัวอย่างเช่น ธีม Colibri WP นำเสนอพื้นหลังวิดีโอ

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งานธีม

ในการเปิดใช้งานพื้นหลังของวิดีโอ ให้ติดตั้งธีม Colibri WP จากนั้นไปที่ ลักษณะ ที่ปรากฏ > การตั้งค่า Colibri > เริ่มต้น ใช้งาน คุณสามารถเปิดใช้งานคุณลักษณะ Colibri Page Builder ได้ที่นี่

ขั้นตอนที่ 2: เพิ่มไซต์สาธิต

คลิกที่แท็บ ไซต์สาธิต และ นำเข้า เทมเพลตตัวอย่างที่คุณเลือก

ขั้นตอนที่ 3: ปรับแต่งภาพฮีโร่

ไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง แล้วเลือกไอคอนรูปเฟือง การตั้งค่า ถัดจากโมดูล ฮีโร่

ขั้นตอนที่ 4: เพิ่มพื้นหลังวิดีโอ

เลือกแท็บ สไตล์ และสลับ พื้นหลัง เป็น วิดีโอ

สุดท้าย เลือก YouTube เพื่อวางใน URL วิดีโอ ภายนอก หรือ โฮสต์ด้วยตนเอง เพื่ออัปโหลดวิดีโอในเครื่อง

ด้วยเหตุนี้ คุณจะเห็นพื้นหลังของวิดีโอเคลื่อนไหวบนหน้าตัวอย่าง Customizer

เริ่มต้นด้วยพื้นหลังวิดีโอที่สมบูรณ์แบบ

ในโพสต์นี้ คุณได้เรียนรู้วิธีต่างๆ สี่วิธี ซึ่งอย่างน้อยหนึ่งวิธีควรใช้กับสถานการณ์ของคุณ

️ สำหรับวิธีอื่นๆ ในการปรับปรุงไซต์ของคุณ โปรดดูโพสต์ของเราที่มีองค์ประกอบ 10 ประการของการออกแบบโฮมเพจที่ประสบความสำเร็จ

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