Responsive đang là một yêu cầu bắt buộc đối với các thiết kế web mới. Trong quá trình làm web responsive, có nhiều việc phải làm, ngoài việc tạo ra lưới tổng quát có tính tùy biến cao, thì việc xử lý những phần tử riêng như Menu, Hình ảnh, Video… cũng là một trong những công việc chúng ta thường xuyên phải bận tâm, phải để ý. Hôm nay MyLớp.edu.vn sẽ cùng bạn tìm hiểu kỹ thuật hiển thị Responsive Video trên các trang web bằng những cách khác nhau.

Kỹ thuật hiển thị Responsive Video trên các trang web

Responsive Video là những Video có tính tùy biến cao. Khi xem trang web trên các thiết bị có kích thước màn hình khác nhau, những Video này có khả năng tự co giãn một cách linh động. Và quan trọng khi co giãn, tỉ lệ ngang – dọc của Video vẫn được bảo toàn.

Bạn hãy xem ví dụ ngay trong Video dưới đây nhé. Khi thay đổi kích thước trình duyệt, Video sẽ thay đổi theo mà vẫn giữ nguyên ratio. Quá tuyệt đúng không nào?!

Có một số kỹ thuật khác nhau, tuy nhiên những cách dưới đây là đơn giản, hiệu quả nhất. Bạn hãy cùng theo dõi nhé.

1. Sử dụng Twitter Bootstrap

Nếu bạn sử dụng Twitter Bootstrap để code web, thì mọi việc khá đơn giản. Để chèn Video vào web, bạn sử dụng theo cách sau.

Với các Video có độ phân giải màn hình rộng 16:9, sử dụng cách này:

1
2
3
4

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..." width="300" height="150"></iframe>
</div>

Dành cho các Video có độ phân giải kiểu cũ 4:3 thì sử dụng cách này:

1
2
3
4

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..." width="300" height="150"></iframe>
</div>

Ngoài thẻ <iframe> như trong ví dụ, bạn có thể sử dụng tương tự cho những thẻ khác như <video>, <embed>, <object>

1
2
3
4
5
6
7
8

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <video class="embed-responsive-item" controls="controls" width="320" height="240">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    Your browser does not support the video tag.
  </video>
</div>

Lưu ý, những bản Bootstrap trước đây không có tính năng này, hãy đảm bảo bạn đang sử dụng Bootstrap mới nhất nhé! (Tại thời điểm tác giả viết bài này, Bootstrap đang là bản 3.3.4)

Nếu bạn sử dụng Bootstrap cũ, hãy xem cách làm bên dưới đây.

2. Tự code CSS

Với trường hợp các bạn tự code CSS hoặc sử dụng Twitter Bootstrap phiên bản cũ, phần HTML các bạn cũng làm như cách 1, nhưng cần thêm vào những đoạn code CSS sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
 
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
 
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
 
.embed-responsive-4by3 {
  padding-bottom: 75%;
}

Chỉ copy thôi mà, khá đơn giản phải không các bạn?!hehe

3. Kết luận

Responsive Video là một kỹ thuật không quá khó và cần thiết với các web hiện đại ngày nay. Hi vọng qua bài hướng dẫn này, bạn sẽ biết cách hiển thị Video ngon hơn, chuyên nghiệp hơn! Chúc bạn thành công!

Cheers,

The following two tabs change content below.

• Bio
• Latest Posts

Lục Đức Thành

Giáo viên at FPT Arena

Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Latest posts by Lục Đức Thành (see all)

• Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
• Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
• WordPress 5 có gì mới? - 23/12/2018
• Sublime Text 3 Portable Windows 64 bit - 11/12/2017
• Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017