Trang chủ Lập trình Javascript - HTML Tạo responsive cho trình Youtube chèn vào trang web

Tạo responsive cho trình Youtube chèn vào trang web

Khi bạn chèn video trên Youtube vào trang web của mình bạn sẽ nhận được 1 đoạn mã chèn iframe vào trang web hoặc là một đoạn mã chèn flash nếu bạn chọn theo mã cũ. Và thông thường thì với những đoạn mã này bạn sẽ phải cố định kích thước nên rất khó để làm responsive (tương thích với các thiết bị).

Tuy nhiên với một chút kiến thức về CSS bạn có thể dễ dàng loại bỏ sự không tương thích này. Rất đơn giản, đầu tiên bạn hãy qui định cách đặt code chèn vào lúc nào cũng hãy nằm trong 1 thẻ div bao ví dụ ở đây mình đặt tên là video-container.

Và giờ bạn cần viết CSS cho các thành phần như sau:

Xong, bạn có thể chạy thử để kiểm tra. Nếu bạn chèn iframe thì viết CSS cho iframe bạn có thể viết thêm object hoặc embed.

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

Huỳnh Mai Anh Kiệt

- Advertisement -
Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

BÀI VIẾT MỚI

Google sắp khai tử ứng dụng Google Shopping trên iOS và Android

Google được cho là đã thêm Google Shopping vào danh sách các ứng dụng sắp khai tử của mình. Sau khi các thành viên...

Google Pixel 5A 5G vẫn sẽ ra mắt vào cuối năm nay

Thứ Sáu tuần trước, Google cho biết sẽ ra mắt điện thoại tầm trung Pixel 5A vào cuối năm nay, bác bỏ tin đồn...

Facebook chi 23 triệu đô la để bảo vệ Mark Zuckerberg

Facebook đã chi hơn 23 triệu USD để bảo vệ cho Mark Zuckerberg - CEO và là người sáng lập Facebook vào năm ngoái....

Cách tùy chỉnh công cụ tìm kiếm trong Firefox

Bạn có thể sử dụng bất kỳ công cụ tìm kiếm nào mà bạn thích trong trình duyệt web của mình. Và bạn cũng...

12 cách khắc phục con trỏ chuột không hiển thị trong Windows 10

Con trỏ chuột đã trở thành một phần không thể thiếu trong quá trình chúng ta tương tác với máy tính. Vì vậy, hãy...

BẠN XEM CHƯA

Google sẽ bỏ ứng dụng AdSense trên Android và iOS trong năm nay

Google AdSense là một dịch vụ quảng cáo trên Internet được Google ra mắt cho chủ sở hữu trang web (nhà xuất bản). Với...

Hệ điều hành Google Fuchsia sẽ hỗ trợ Snapdragon 835

Android đã trở thành hệ điều hành được sử dụng rộng rãi nhất. Tuy nhiên, Google không muốn dừng lại đây mà vẫn muốn...

Cách kiểm tra dung lượng của cơ sở dữ liệu MySQL

Hôm nay nổi hứng chợt muốn kiểm tra dung lượng của tất cả các cơ sở dữ liệu (database) trên hệ thống. Và đây...

Đêm thấy ta là thác đổ

Một đêm bước chân về gác nhỏ Chợt nhớ đóa hoa tường vi Bàn tay ngắt hoa từ phố nọ Giờ đây đã quên vườn xưa. Trong cái...

Website trường đại học Quy Nhơn bị tấn công trước thềm năm học mới

Sáng sớm nay (29/08/2016) website trường đại học Quy Nhơn đã bị hacker tấn công thay đổi giao diện (deface). Tuy nhiên có vẻ như...