วิธีทำ Youtube Video ให้รองรับ Responsive

Responsive

คือ การทำเว็บไซต์ของเราให้สามารถแสดงผลได้สวยงาม ทั้งในคอมพิวเตอร์ แท็บเล็ต มือถือ ฯลฯ

FITVIDS.JS

คือ Js สำเร็จรูปที่ถูกพัฒนาโดย Chris Coyier และ Paravel เพื่อให้เว็บไซต์ของเรารองรับ Responsive Youtube Video สามารถดูข้อมูลเพิ่มเติมได้ที่ FITVIDS.JS

ขั้นตอนการติดตั้ง FITVIDS.JS

ดาวน์โหลด FITVIDS.JS
นำไฟล์ที่ดาวน์โหลดมาไปไว้ที่ธีมของเราตามตำแหน่งที่เราต้องการ ปล.ตามตัวอย่างโค้ดใส่ในโฟเดอร์ vendor
ใส่โค้ดในไฟล์ header.php ที่ส่วน head ปล. ดูตำแหน่งให้ตรงตามข้อ 2
```
<script src="<?php echo get_template_directory_uri(); ?>/vendor/fitvids/fitvids.js"></script>
```
ใส่โค้ดในในไฟล์ footer.php บน wp_footer() ปล. ส่วน .entry-content สามารถเปลี่ยนได้ตามความเหมาะสม
```
<script type="text/javascript">
     jQuery(document).ready(function() {
          jQuery(".entry-content").fitVids();
     });
</script>
```

เพียง 4 ขั้นตอนด้านบนก็จะสามารถทำให้ Video Youtube หรือ iframe ที่อยู่ในคลาส entry-content ทั้งหมดของเราก็จะรองรับการทำงาน Responsive เป็นที่เรียบร้อย

Narongchai Suphiratwanich (K)

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย