วิธีเพิ่มวิดีโอ YouTube เป็นพื้นหลังแบบเต็มหน้าจอใน WordPress

เผยแพร่แล้ว: 2023-06-10

คุณกำลังมองหาวิธีเพิ่มวิดีโอ YouTube เป็นพื้นหลังแบบเต็มหน้าจอใน WordPress หรือไม่?

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

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

How to add YouTube video as fullscreen background in WordPress

เหตุใดจึงต้องใช้วิดีโอ YouTube เป็นพื้นหลังแบบเต็มหน้าจอ

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

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

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

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

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

วิธีเพิ่มวิดีโอ YouTube เป็นพื้นหลังแบบเต็มหน้าจอใน WordPress

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

An example of a YouTube video background in WordPress

ก่อนอื่น คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน หากคุณต้องการความช่วยเหลือ โปรดดูคำแนะนำของเราเกี่ยวกับวิธีติดตั้งปลั๊กอิน WordPress

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

ในป๊อปอัปที่ปรากฏขึ้น ให้เริ่มพิมพ์ 'Background AWB' เมื่อบล็อกทางขวาปรากฏขึ้น ให้คลิกเพื่อเพิ่มลงในเพจ

How to add a fullscreen video to a WordPress blog post or page

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

เนื่องจากคุณต้องการเพิ่มวิดีโอ YouTube ให้คลิกที่แท็บ 'วิดีโอ'

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

จากที่กล่าวมา ให้เลือกแท็บ 'YouTube / วิดีโอ'

How to add a YouTube video as a fullscreen background in WordPress

ตอนนี้ คุณต้องมี URL ของวิดีโอ YouTube ที่คุณต้องการใช้ในบล็อก WordPress ของคุณ

ในแท็บใหม่ เพียงตรงไปที่วิดีโอแล้วคัดลอกลิงก์ในแถบที่อยู่

Getting the URL for a YouTube video

เมื่อเสร็จแล้ว ให้เปลี่ยนกลับไปที่แดชบอร์ด WordPress ของคุณและวาง URL ลงในแท็บ 'Video URL'

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

How to customize a YouTube background video in WordPress

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

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

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

Showing a YouTube background on mobile devices

เมื่อแกะกล่อง บล็อกจะเล่นวิดีโอ YouTube ทั้งหมดแบบวนซ้ำ

อีกทางเลือกหนึ่งคือเล่นวิดีโอเฉพาะส่วนโดยพิมพ์เวลาที่แน่นอนลงในช่อง 'เวลาเริ่มต้น' และ 'เวลาสิ้นสุด'

How to add a YouTube background video to a website

คุณยังสามารถหยุดวิดีโอไม่ให้เล่นวนซ้ำได้ด้วยการปิดสวิตช์ 'วนซ้ำ'

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

เมื่อคุณเพิ่มวิดีโอครั้งแรก วิดีโอจะแสดงที่ความทึบ 100% ดังนั้นจึงดูมั่นคง

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

Changing the opacity settings for a YouTube video

หากคุณทดลองกับความทึบ คุณอาจต้องการลองเพิ่มการซ้อนทับที่มีสี

เพียงคลิกเพื่อขยายส่วน 'สีโอเวอร์เลย์' จากนั้นใช้การตั้งค่าเพื่อสร้างโอเวอร์เลย์สีต่างๆ

Adding an overlay to a video background

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

หากต้องการลองใช้เอฟเฟกต์พารัลแลกซ์แบบต่างๆ ให้คลิกเพื่อขยายส่วน 'พารัลแลกซ์' จากนั้นเลือกตัวเลือกจากเมนูแบบเลื่อนลง

Adding parallax effects to a WordPress website

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

ในทำนองเดียวกัน คุณสามารถทดลองกับเอฟเฟกต์พารัลแลกซ์ของเมาส์แบบต่างๆ ซึ่งทำให้พื้นหลังเลื่อนช้าลงเมื่อผู้เข้าชมเลื่อนเมาส์

หากต้องการดูการตั้งค่าเหล่านี้ ให้คลิกเพื่อขยายส่วน 'พารัลแลกซ์ของเมาส์'

Adding mouse parallax effects to a background video

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

ในการเริ่มต้น คลิกที่ไอคอน '+' ตรงกลางบล็อกพื้นหลัง (AWB)

Adding blocks to a YouTube background video

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

หลังจากกำหนดค่าบล็อกแรก เพียงคลิกที่ปุ่ม '+' อีกครั้ง จากนั้นเพิ่มบล็อกถัดไปที่คุณต้องการใช้

Adding a RafflePress giveaway block to a video background

เพียงทำซ้ำขั้นตอนนี้เพื่อสร้างโพสต์หรือเลย์เอาต์ของเพจ

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

An example of a YouTube video background in WordPress

โบนัส: วิธีเพิ่มฟีดวิดีโอ YouTube ใน WordPress

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

นั่นคือที่มาของ Smash Balloon

Smash Balloon YouTube Feed Pro เป็นปลั๊กอินแกลเลอรี่ YouTube ที่ดีที่สุดในตลาด จะแสดงวิดีโอล่าสุดทั้งหมดจากช่อง YouTube ของคุณโดยอัตโนมัติ ดังนั้นผู้เข้าชมจึงเห็นเนื้อหาล่าสุดอยู่เสมอ

Embedding a YouTube playlist using Smash Balloon

เพียงสร้างฟีด YouTube โดยใช้ตัวแก้ไขอย่างง่ายของ Smash Balloon จากนั้นเพิ่มลงในหน้าหรือโพสต์ใดก็ได้โดยใช้รหัสย่อหรือบล็อกสำเร็จรูปของปลั๊กอิน

คุณยังสามารถใช้ Smash Balloon เพื่อฝังเพลย์ลิสต์ YouTube รายการโปรด และสตรีมสดบนเว็บไซต์ WordPress ของคุณ

Creating a YouTube feed using the Smash Balloon social media plugin

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

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลช่อง YouTube ของเราสำหรับวิดีโอสอน WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook