Hướng dẫn tạo Responsive cho video Youtube trong WordPress

Hướng dẫn tạo Responsive cho video Youtube trong WordPress

Ở bài trước mình đã hướng dẫn chèn video vào bài viết trong WordPress nhưng nếu theme không hỗ trợ Responsive thì những khi truy cập bằng di động sẽ bị vỡ khung. Bài này mình sẽ hướng dẫn các bạn tự thêm chức năng Responsive cho video nhúng từ Youtube vào website của mình.

Với website thông thường

Đa số các website hiện nay đều có hỗ trợ HTML khi viết bài nên cách này bạn có thể áp dụng cho website của bạn.

Đầu tiên bạn chèn đoạn CSS nào vào file .css website của mình nhé:

Sau đó bạn copy đoạn url của video hoặc đoạn mã nhúng iframe của video Youtube (bạn có thể tùy chọn chọn kích thước)

Chèn video từ Youtube

Để sử dụng bạn chèn đoạn mã này vào vị trí cần hiển thị trong bài viết

Như vậy thì video đã được Responsive rồi đó.

Đối với WordPress

Cách nhanh nhất là bạn tìm và cài đặt plugin tên là Advanced Responsive Video Embedder – một plugin miễn phí tự động responsive các video mà bạn chèn băng oEmbed (trong bài trước).

Ngoài ra, plugin này còn có tính năng Lazy Load cho video, khi bạn click vào thì các mã nhúng của video mới được thực thi. Cái này giúp bạn hạn chế bị giảm tốc độ khi chèn video.

Xem thêm: Thủ thuật tăng tốc độ tải trang cho website WordPress

Nếu bạn không muốn cài nhiều plugin thì có sử dụng cách chèn CSS thủ công ở bên trên những để nhanh chóng hơn khi chèn video thì bạn chèn đoạn mã bên dưới vào file functions.php để nó tự thêm thẻ <div class="responsive-video">...</div> bao quanh

Vậy là bạn đã tự tạo chức năng Responsive khi chèn video của Youtube cho website của mình rồi đó (kể cả WordPress). Quá đơn giản phải không? Nếu bạn có plugin gì hay cho WordPress nhằm hỗ trợ Responsive cho video thì chỉ mình với nhé!

Hướng dẫn tạo Responsive cho video Youtube trong WordPress
4.5 (2 votes)

4 Bình luận

Post Comment

Đăng kí BẢN TIN

Đăng kí BẢN TIN

Đăng kí bản tin to cập nhật bài viết nhanh nhất and receive the following phần quà hấp dẫn từ Nam Ngô Blog.

Bạn đã đăng kí thành công!