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

วิดีโอนั้นยอดเยี่ยม พวกมันให้สื่อที่น่าจับตามองและจับอารมณ์ได้มากกว่าภาพ

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

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

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

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

ปลั๊กอินนั้นยอดเยี่ยม มีฟังก์ชันที่จำเป็นด้วยการคลิกเพียงไม่กี่ครั้ง ฉันจะแสดงรายการปลั๊กอินบางตัวก่อนที่จะไปยังบทช่วยสอนโดยละเอียดเกี่ยวกับวิธีการฝังวิดีโอลงในพื้นหลังโดยใช้การเข้ารหัส

1. mb .YTPlayer สำหรับวิดีโอพื้นหลัง

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

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

ปลั๊กอินไม่รองรับรูปแบบตอบสนองอย่างสมบูรณ์

รายละเอียดและดาวน์โหลด | การสาธิต

2. ฮีโร่ตัวเลื่อนพร้อมเอฟเฟกต์แอนิเมชั่น

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

ปลั๊กอินนี้เข้ากันได้กับธีมหรือตัวแก้ไขของ WordPress เช่น Gutenberg ดังนั้นมันจะตอบสนองและรวดเร็วบนเว็บไซต์ WordPress ทั้งหมด

รายละเอียดและดาวน์โหลด | การสาธิต

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

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

1. ใช้ Div เพื่อสร้างพื้นที่สำหรับวิดีโอ

2. รับตำแหน่ง Div ที่ด้านบนซ้ายของวิวพอร์ตในแบบสัมบูรณ์หรือคงที่ ขั้นตอนต่อไปคือการตั้งค่าความสูงและความกว้างเป็น 100% จากนั้นตั้งค่าดัชนี z เป็น 1 ดัชนี Z กำหนดความลึกของเนื้อหา

3. ปรับขนาดวิดีโอ Div โดยใช้ JavaScript

4. ตรวจสอบการปรับขนาดหน้าจอและปรับขนาดวิดีโออีกครั้งทุกครั้งที่ผู้ใช้ปรับขนาดวิดีโอ

5. ตรวจสอบให้แน่ใจว่ารหัสทำงานบนเบราว์เซอร์และระบบปฏิบัติการมือถือที่แตกต่างกัน

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

BGVIDEO: ดาวน์โหลด

ดาวน์โหลดปลั๊กอินและดำเนินการติดตั้งตามปกติ (เช่นเดียวกับการติดตั้งปลั๊กอินอื่นๆ)

ปลั๊กอินอย่างง่ายนี้ทำงานควบคู่กับรหัสย่อและรหัสย่อชื่อ “bgvideo” มีอยู่ในปลั๊กอิน รหัสสั้นทำหน้าที่เป็นประตูสู่การฝังวิดีโอลงในหน้าหรือโพสต์ใดๆ

ก่อนดำเนินการต่อ เราจำเป็นต้องป้อนพารามิเตอร์บางอย่างให้กับรหัสย่อเพื่อให้ทำงานได้อย่างสมบูรณ์

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

การเพิ่มวิดีโอลงในไลบรารีสื่อ

ขั้นตอนต่อไปรวมถึงการเพิ่มวิดีโอลงในไลบรารีสื่อ ตรวจสอบให้แน่ใจว่าคุณเพิ่มรูปแบบทั้งหมด (webm, ogg, mp4) ลงในไลบรารีสื่อ

ด้วยความช่วยเหลือของ bgvideo รหัสย่อของวิดีโอจะถูกแปลงเป็น bgvideo

รหัสสั้นของวิดีโอมีลักษณะดังนี้

[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video width=”1280″ height=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]

<a%href=”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”><img%class=”alignnone size-large wp-image-1392″ src =”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”video-background-test” width=”1024″ height=”576″ />

อย่าลืมลบเครื่องหมายเปอร์เซ็นต์ (%) หน้ารหัสย่อวิดีโอและแท็กสมอ

ด้วยความช่วยเหลือของ bgvideo โค้ดด้านบนจะเปลี่ยนเป็นโค้ดด้านล่าง

 [bgvideo width="1280" height="720" 
  mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  โปสเตอร์="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  คงที่ = "ไม่"]

ปลั๊กอินจะเปลี่ยนรหัสย่อของวิดีโอเป็นรหัสย่อ bgvideo โดยอัตโนมัติ

ทำให้วิดีโอโปร่งใสต่อผู้ใช้

ด้วยการตั้งค่าทุกอย่าง คุณต้องทำสิ่งมหัศจรรย์เล็กน้อยในคุณสมบัติ CSS ของหน้า เหตุผลก็คือเนื้อหาของหน้าขัดขวางการแสดงวิดีโอ

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

ใส่โค้ด CSS ด้านล่างเพื่อให้ทุกอย่างทำงานได้ดี

#หน้าหนังสือ{

พื้นหลัง:ไม่มี;

}

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

สรุป

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

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

ภาพเคลื่อนไหวสามารถสร้างได้อย่างง่ายดายโดยใช้ CSS หรืออัปโหลดผ่านการเปลี่ยนพื้นหลังปกติ

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

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

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

หากคุณใช้ Mac คุณสามารถใช้ iMovie ได้เนื่องจากได้รับการติดตั้งไว้ล่วงหน้าในคอมพิวเตอร์ของคุณแล้ว (หากไม่ใช่ คุณสามารถรับได้ฟรี) และหากคุณใช้ Windows – VSDC Free Video Editor เป็นตัวเลือกที่ยอดเยี่ยม มีทุกสิ่งที่คุณต้องการตั้งแต่ชุดเครื่องมือการแยก/ครอบตัดพื้นฐาน ไปจนถึงการแก้ไขสีและการตั้งค่าสไตล์วิดีโอที่ตั้งไว้ล่วงหน้า นอกจากนี้ยังมีประสิทธิภาพมากเมื่อพูดถึงรูปแบบ และคุณไม่จำเป็นต้องเสียสละคุณภาพของไฟล์ที่ส่งออก

คุณคิดว่าฉันพลาดบางสิ่งบางอย่าง? แสดงความคิดเห็นด้านล่างและแจ้งให้เราทราบ

*อัพเดทล่าสุด 02/25/2019