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.
1 2 3 | <div class="video-container"> <iframe width="560" height="315" src="http://www.youtube.com/embed/gubZAH5Cz9E" frameborder="0" allowfullscreen></iframe> </div> |
Và giờ bạn cần viết CSS cho các thành phần như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .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%; } |
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
