Hướng dẫn Responsive videos với jquery Fitvids

FitVids11 Hướng dẫn Responsive videos với jquery Fitvids

 

1. Giới thiệu tổng quan

thegioiwordpress.com- Như những bài trước mà thuthuatwordpress có đề cập tới vấn đề responsive trong website thì thông qua đó các bạn cũng đã phần nào nắm được responsive là gì và làm thế nào để responsive website của mình một cách tốt nhất, hiển thị tốt nhất trên các thiết bị  ?

Trong bài viết ngày hôm nay Thuthuatwordpress sẽ giới thiệu đến mọi người một jquery rất hay liên quan tới việc Responsive.  Nếu bạn nào đã và đang làm responsive mà nội dung có chứa video như youtube chẳng hạn thì sẽ thấy ngay một vấn đề ở đây đó là: Các thành phần nội dung bình thường thì có thể responsive được khi thay đổi màn hình tuy nhiên Video lại không

Để khắc phục điều này thì mình phát hiện ra Jquery , Với jquery này thì việc hiển thị responsive cho video sẽ không phải là điều đáng lo ngại nữa. Còn nhiệm vụ tiếp theo mà chúng ta cần làm để được điều đó là cần phải nhúng Jquery này vào website của bạn.

2. Nhúng Fitvids vào trong Website

2.1: Cài đặt plugin

Có lẽ cách đơn giản nhất và nhanh nhất dành cho bạn nào không chuyên code và ngại vọc tới code là dùng plugin Fitvids mà mình có đưa ở trên.

fitvids thumb Hướng dẫn Responsive videos với jquery Fitvids

Sau khi cài đặt trong plugin thì bạn vào phần setting của plugin Fitvids để cấu hình cho nó hoạt động. Rất đơn giản bạn chỉ việc điền một selector Css vào trong ô , thẻ này tốt nhất là thẻ bao đoạn video và phân vùng video được hiển thị nhiều nhất. có thể là #main, hay .wrapper gì đó trong website của bạn. Nhất save và quay lại website xem kết quả thôi icon smile Hướng dẫn Responsive videos với jquery Fitvids

2.2 Nhúng code js vào trong website

Đây là việc mà mình hay làm vì cũng có e ngại tới việc dùng plugin và hạn chế dùng plugin trong khả năng mình làm được.

– Điều đầu tiên là cần phải down source Js Fitvids về và đưa lên thư mục theme hiện tại bạn đang dùng

– Tạo file Js có tên: fitvids.js, parse đoạn Js  code sau vào:

1
2
3
jQuery(document).ready(function($) {
$( '.main' ).fitVids();
});

Bạn có thể thay .main bằng bất kỳ một selector khác như phần plugin trên mình đã nói

– Nhúng đoạn 2cScripts vào trong theme ở trong file: header.php hoặc footer.php

1
2
3
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.fitvids.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/fitvids.js"></script>

Hoặc enqueue trong function.php mà mình hay dùng:

 

1
2
3
wp_register_script( 'fitvids', CHILD_URL . 'js/jquery.fitvids.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'responsive-video-fitvids', CHILD_URL . 'js/fitvids.js', array( 'jquery', 'fitvids' ), true );

 

Như vậy là hoàn thành công việc nhúng JS rồi, các bạn có thể quay lại kiểm tra kết quả xem thế nào

 

Tổng kết:  Với việc lựa chọn nhúng JS Fitvids hoặc đơn giản là cài plugin Fitvids thì các bạn đã làm xong một việc là fix lỗi responsive của video trên các thiết bị hiển thị website của bạn rồi. Có thể bài viết rất khó hiểu hoặc tổng hợp của mình chưa đủ, các bạn đóng góp giúp mình hoặc có gì thắc mắc thì comment dưới.

Nguồn: thuthuatwordpress.org

Cùng Danh Mục

Nội Dung Khác

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>