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

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