Hiển thị Responsive Video Youtube cho WordPress trên Mobile

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Hiển thị Responsive Video Youtube cho WordPress trên Mobile

Responsive là xu hướng mới trong nghề công nghiệp thiết kế WordPress Theme, không ai muốn cài đặt các plugin hoặc theme riêng lẻ với mục đích chạy riêng trên thiết bị mobile.

Hầu hết những theme wordpress đều tích hợp tính năng responsive cho mobile tuy nhiên bạn không chắc chắn nó được tối ưu để hiển thị mã nhúng iFrame tỉ dụ hiển thị Youtube video.

Tạo Embed Video Responsive

Dán đoạn code dưới đây vào style.css của theme:

 .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .entry-content img, .entry-content iframe, .entry-content object, .entry-content embed { max-width: 100%; }  

Bây giờ, bất cứ bao giờ bạn nhúng một video vào thẻ DIV có class ‘.video-container’.

  
Video Embed code

Ví dụ chúng ta nhúng một video youtube với đoạn code sau:

   

Xem demo.
Bạn cũng có thể có thể sử dụng phương pháp này áp dụng cho nhiều dịch vụ cung cấp video không những youtube, chẳng hạn Vimeo, Slideshare…

Nếu bạn mong muốn cài đặt plugin và không muốn sửa theme, cũng có thể sử dụng plugin Advanced Responsive Video Embedder hoặc Fluid Video Embeds.

Để thu được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng đều có thể thu được sự trợ giúp trên Twitter và Facebook

Bài viết Hiển thị Responsive Video Youtube cho WordPress trên Mobile được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang