Responsive cho videos trên kênh YouTube nhúng vào website của bạn


Khi xây dựng website, việc nhúng videos là một trong những công việc hết sức quan trọng và cần thiết. Tuy nhiên, vấn đề là khi videos hiển thị trên các thiết bị khác như điện thoại di động hoặc máy tính bảng lại là một vấn đề gặp khá nhiều khó khăn. Trong bài viết này chúng tôi sẽ hướng dẫn các bạn cách nhúng videos vào website mà vẫn xác định được responsive chuẩn khi chạy trên các thiết bị khác như điện thoại hoặc máy tính bảng.

Phần CSS:

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0; overflow:hidden;
}
.video-container iframe
{ 
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

Phần HTML:

<div class="videoWrapper">
	<iframe frameborder="0" height="400" src="https://www.youtube.com/embed/q8tI0TUuHpM?list=PLMI-61XivrDqqFi9P7PeKbwDrZPPPdrbJ" width="100%">		
	</iframe>
</div>

 


Bình luận

Đăng ký là thành viên để tham gia bình luận