วิธีทำ Youtube Video ให้รองรับ Responsive ด้วย fitvids.js

fitvids-js

Responsive

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

FITVIDS.JS

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

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

  1. ดาวน์โหลด FITVIDS.JS
  2. นำไฟล์ที่ดาวน์โหลดมาไปไว้ที่ธีมของเราตามตำแหน่งที่เราต้องการ ปล.ตามตัวอย่างโค้ดใส่ในโฟเดอร์ vendor
  3. ใส่โค้ดในไฟล์ header.php ที่ส่วน head ปล. ดูตำแหน่งให้ตรงตามข้อ 2
    <script src="<?php echo get_template_directory_uri(); ?>/vendor/fitvids/fitvids.js"></script>
  4. ใส่โค้ดในในไฟล์ 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 เป็นที่เรียบร้อย

โดย: [K] Narongchai Suphiratwanich

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

สอบถาม & พูดคุย