Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Hiển thị Responsive Video Youtube cho WordPress trên Mobile

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

Thứ Năm, 26/03/2015 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Responsive là xu hướng mới trong ngành 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 ví 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ứ lúc nào bạn nhúng một video vào thẻ DIV có class ‘.video-container’.

<div class="video-container"> Video Embed code </div>

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

<div class="video-container"> 
<iframe width="560" height="315" src="http://www.youtube.com/embed/S95J5BowMmk" frameborder="0" allowfullscreen></iframe> 
</div>

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

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

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Kéo dài thời gian đăng nhập trong wordpress
  2. WordPress Import/export dữ liệu với 5 plugins chất lượng
  3. WordPress – Tối ưu CRON ?doing_wp_cron=***
  4. WooCommerce – Tự động thêm sản phẩm vào giỏ hàng khi truy cập vào website
  5. Sử dụng filter sửa thuộc tính shortcode
  6. Plugin tự chuyển sang giao diện điện thoại cho wordpress
  7. WordPress theme swicher without plugin
  8. Hướng dẫn Multisite trong wordpress
  9. Hướng dẫn dùng template tags trong loop
  10. Hướng dẫn sửa lỗi Error Establishing a Database Connection

Chuyên mục: Wordpress Tìm kiếm: slideshare, vimeo, youtube

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

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

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.