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

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

- Advertisment -
Shopify

BÀI VIẾT MỚI

Facebook chi 400 triệu đô để mua lại Giphy

Giphy là một nền tảng trực tuyến hỗ trợ lưu trữ và tìm kiếm ảnh động (GIF) trực tuyến của Mỹ. Và mới đây...

reCAPTCHA rất hữu ích trong số hoá dữ liệu

Sách được xem là những kho tàng tri thức của nhân loại, tuy nhiên việc lưu trữ sách là cả một vấn đề to...

The Pirate Bay đã trở lại bằng tên miền ban đầu

Sau khi The Pirate Bay bị "chết" đội ngũ đã gửi tất cả lưu lượng truy cập đến "lỗ đen" (Local Black Hole 127.0.0.1.)và...

Dân Anh đốt cột phát sóng 5G vì nghi phát tán virus Corona

Ít nhất ba cột phát sóng 5G vừa bị đốt cháy vì có người tin rằng nó là nguồn phát tán virus corona. Theo BBC,...

Kiểm tra trình duyệt của khách có phải là Safari bằng PHP

Hôm rồi chợt nhận ra điều là Safari của Apple chưa hỗ trợ hiển thị ảnh WebP. Vậy là cái plugin Hura Apps Photos...

BẠN XEM CHƯA

Cắm hoa… trực tuyến tặng thầy cô nhân ngày 20 – 11

Ngày 20/11 lại đến. Ngày thiêng liêng nhất cả hàng triệu học sinh – sinh viên dành tình cảm chân thành nhất đến những...

Tên miền tại NameCheap chỉ còn $0.88

Theo thông báo của NameCheap thì từ đây đến ngày 10/03/2016 tới đây bạn sẽ có cơ hội đăng ký tên miền với giá...

Mạng Bình Định hỗ trợ tra cứu điểm thi THPT Quốc gia 2019 ở Hội đồng thi Bình Định

Theo thông tin Báo Bình Định thì tính đến thời điểm hiện tại công tác chấm thi ở Hội đồng thi THPT Quốc gia...

Kéo dài thời gian dùng thử phần mềm quá dễ dàng

Để giới thiệu sản phẩm của mình với người dùng các công ty sản xuất phần mềm thường dùng cách cho phép người dùng...

Khám phá Quy Nhơn trong 48 giờ

Ngày 1: Tham quan trong thành phố 7h30: Ăn sáng Bạn có thể ghé quán Thùy (261, đường Tăng Bạt Hổ), nơi phục vụ các loại...