การตกแต่งเว็บไซต์

การแทรกวีดีโอ ใน ข่าว/รายละเอียดสินค้า/แกดเจ็ต HTML แบบกำหนดเอง

ขอยกตัวอย่างการแทรกวีดีโอในแกดเจ็ต HTML แบบกำหนดเอง ให้ดูละกันนะคะ ซึ่งการแทรกวีดีโอมี 2 วิธีดังนี้ค่ะ 

 

แกดเจ็ตคืออะไร??? มาทำความรู้จักกับแกดเจ็ตกันดีกว่า

line 

วิธีที่ 1 การ copy ลิงค์วีดีโอมาวาง ซึ่งสามารถใช้ได้กับวีดีโอจาก Youtube

 

1. ที่หน้าต่าง Text Editor  ให้เลือกเครื่องมือ btnVideo (Insert/Edit Embedded Media) 

video02

 

 

 

2. จะปรากฏหน้าต่าง Insert/Edit Embedded Media ขึ้นมา ให้ copy URL มาวางในช่อง File/URL เราสามารถปรับขนาดความกว้างของวีดีโอที่ต้องการแสดงในช่อง Dimensions ได้อีกด้วย เมื่อเราตั้งค่าเสร็จเรียบร้อยแล้ว ให้คลิกที่ปุ่ม btnInsert เพื่อทำการแทรกวีดีโอแล้วหน้าต่างนี้จะถูกปิดไป

video03

 

 

 

***หมายเหตุ หากต้องการให้วีดีโอเล่นอัตโนมัติเมื่อเปิดหน้าเว็บขึ้นมา ให้พิมพ์ ?autoplay=1 ต่อท้าย URL ก่อน copy URL มาวางในช่อง File/URL

vdo.autoplay

 

 

 

3. ที่หน้าต่าง Text Editor จะเห็นได้ว่าเราได้ทำการแทรกวีดีโอเข้ามาแล้ว โดยวีดีโอที่แทรกเข้ามาจะมีลักษณะเป็นกล่องสีเหลือง เมื่อเราจัดการข้อมูลต่างๆ ตามที่ต้องการแล้ว ก็คลิกที่ปุ่ม btnSubmit

video04

 

 

 

4. ที่หน้าเว็บของเราจะแสดงวีดีโอขึ้นมา ดังตัวอย่างภาพประกอบข้างล่างนี้

video05

 

line

วิธีที่ 2 การ copy Embed Code ของวีดีโอมาวาง

ซึ่งสามารถใช้ได้กับวีดีโอจากเว็บที่รองรับการแชร์วีดีโอด้วย Embed Code เช่น Youtube, Vimeo, Clipmass, Mthai เป็นต้น 

1. คลิกที่เครื่องมือ btnHtml (Show Html Source Code) ใน Text Editor เพื่อเปลี่ยนเป็นโหมด html 

video06

 

 

 

2. วาง Embed Code ลงไป

video07

 

 

 

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

video04