Đào tạo Tin học trực tuyến

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>

 


Xem thêm

   Có gì khác biệt giữa HTML và HTML5?

   5 yếu tố quan trọng của định hướng thị giác trong thiết kế web

   Một số thẻ và Type quan trọng với HTML5 cần chú ý trong quá trình thiết kế website

   Xử lý text với Typography trong Bootstrap 4 CSS FrameWork

   Bootstrap 4.0: Bài 2. Thiết lập hệ thống lưới Grid System

   Bootstrap 4.0: Bài 1. Giới thiệu và các thiết lập cơ bản về công cụ, css, javascript

   Laravel 5.6: Thiết kế trang đăng ký người dùng

   Laravel 5.6: Bổ sung thêm cơ sở dữ liệu cho website

   Màu nền và màu chữ trong Bootstrap 4 CSS Framework

   Laravel 5.6: Validated, xử lý hệ thống đăng nhập, đăng xuất, ghi nhớ đăng nhập

   Laravel 5.6: Thiết kế trang đăng nhập hệ thống quản trị Login

   Laravel 5.6 : Xây dựng hệ thống Models

   Hướng dẫn cài đặt Opencart - CMS hệ thống bán hàng trực tuyến