Thủ thuật tạo chức năng responsive cho video youtube.

  • 20/06/2014
  • 1296
  • 0
Qua bài viết này mình sẽ giới thiệu tới các bạn cách nhúng video để cho các thiết bị di động có thể hiển thị đẹp mắt nhất.

YouTube những dịch vụ lưu trữ video khác cho phép người dùng nhúng video vào trong trang web hay blog của chính họ. Tuy nhiên Youtube những dịch vụ tương tự lại không hỗ trợ chức năng responsive video khi ta nhúng  vào. Tức là những video đó sẽ không tự động thu nhỏ lại mỗi khi kích thước màn hình thay đổi. Và điều này thật sự sẽ gây khó khăn cho người dùng những thiết bị di động vốn dĩ có kích thước hiển thị nhỏ hơn rất nhiều so với máy tính để bàn hay laptop.

Hôm nay mình xin được giới thiệu đến các bạn thủ thuật responsive cho chúng ta nhúng nó vào web hay blog.

responsive cho video 1

1. đầu tiên bạn lấy YouTube Embed Code

- Vào Youtube tìm Video mà các bạn muốn nhúng vào website hay blog của mình.
- Click vào Share >> Embed >> Nhấp chuột phải rồi copy HTML code.

Bước 2 : Nhúng vào web hay bog
các bạn hãy copy đoạn mã code vào bất kì vị trí nào mà các bạn muốn hiển thị video trên trang web của mình. Đoạn code sẽ tương tự như thế này :

responsive 1

Bước 3 : bước quan trọng nhất đây.
Mẹo ở đây là chúng ta sẽ chèn thêm một thẻ div bao quanh toàn bộ đoạn code mà chúng ta vừa nhúng vào web.

responsive 2

Bước 4 : Chèn CSS
Bây giờ là phần cuối cùng, các bạn chỉ cần copy đoạn css bên dưới cho thẻ 

 mà chúng ta tạo ở bước 3.

 

responsive 3

Bây giờ các bạn có thể tự kiểm chứng bằng cách thay đổi kích thước màn hình là có thể thấy được ngay kết quả.

Chúc các bạn thành công !

Tin bài liên quan: Đánh số tự động bằng CSS

  Ý kiến bạn đọc

Bạn cần trở thành thành viên của nhóm để có thể bình luận bài viết này. Nhấn vào đây để đăng ký làm thành viên nhóm!
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây