วิดีโอ

คุณฝังวิดีโอ YouTube ในหน้า DevSite ได้โดยตรงโดยใช้<devsite-video>องค์ประกอบที่กำหนดเอง วิดีโอทั้งหมดจะปรับขนาดตามหน้าจอและคงสัดส่วน 16:9 ไว้เมื่อความกว้างของวิวพอร์ตเปลี่ยนแปลง

หากต้องการฝังวิดีโอ YouTube ให้เพิ่มองค์ประกอบที่กำหนดเอง <devsite-video> ลงในหน้าเว็บ แล้วตั้งค่าแอตทริบิวต์ video-id เป็นค่าของพารามิเตอร์ URL v สำหรับวิดีโอ

ตัวอย่างเช่น หากต้องการฝังวิดีโอ YouTube "สคริปต์แรกของคุณ - บทแนะนำ Apps Script" ที่คุณสามารถดูได้ที่ https://www.youtube.com/watch?v=Pgfbl_o9WvM ให้เพิ่ม<devsite-video>องค์ประกอบที่กำหนดเองต่อไปนี้ลงในหน้า DevSite

<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>

จากนั้นรวมองค์ประกอบที่กำหนดเอง <devsite-video> ไว้ในองค์ประกอบ <div> ที่กำหนดค่าแอตทริบิวต์ class เป็นค่าใดค่าหนึ่งต่อไปนี้

<div class="video-wrapper-left">
  <devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>

ค่าเริ่มต้น

ตัวอย่างต่อไปนี้แสดงลักษณะที่วิดีโอ YouTube ที่ฝังแสดงเมื่อ <devsite-video> อยู่ภายในองค์ประกอบ <div> ที่แอตทริบิวต์ class ได้รับการตั้งค่าเป็น video-wrapper

ในหน้าจอขนาดใหญ่ วิดีโอจะกินพื้นที่ 50% ของความกว้างของพื้นที่เนื้อหาและลอยอยู่ทางด้านขวาของเนื้อหาที่วิดีโอแสดงก่อน บนหน้าจอขนาดเล็ก วิดีโอจะกินพื้นที่ 100% ของความกว้างของพื้นที่เนื้อหา

รหัส

<div class="video-wrapper">
  <devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>

<p>Lorem ipsum dolor...</p>

สาธิต

ลอยไปทางซ้าย

ตัวอย่างต่อไปนี้แสดงลักษณะที่วิดีโอ YouTube แบบฝังแสดงเมื่อ <devsite-video> อยู่ภายในองค์ประกอบ <div> ที่แอตทริบิวต์คลาสตั้งค่าเป็น video-wrapper-left

ในหน้าจอขนาดใหญ่ วิดีโอจะมีความกว้าง 50% ของพื้นที่เนื้อหาและลอยอยู่ทางด้านซ้ายของเนื้อหาที่วิดีโอแสดงก่อน บนหน้าจอขนาดเล็ก วิดีโอจะกินพื้นที่ 100% ของความกว้างของพื้นที่เนื้อหา

รหัส

<div class="video-wrapper-left">
  <devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>

<p>Lorem ipsum dolor...</p>

สาธิต

ความกว้างเต็มขนาด

ตัวอย่างต่อไปนี้แสดงลักษณะที่วิดีโอ YouTube ที่ฝังแสดงเมื่อ <devsite-video> อยู่ภายในองค์ประกอบ <div> ที่แอตทริบิวต์ class ได้รับการตั้งค่าเป็น video-wrapper-full-width

วิดีโอมีขนาดเท่ากับ 100% ของพื้นที่เนื้อหาและจะไม่ส่งผลต่อเลย์เอาต์ของเนื้อหาใดๆ ที่แสดงก่อนวิดีโอ

รหัส

<div class="video-wrapper-full-width">
  <devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>

<p>Lorem ipsum dolor...</p>

สาธิต

หมายเหตุ

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