Để có thể chèn video youtube vào website sao cho phù hợp với bất kỳ một trình duyệt máy tính cũng như các thiết bị điện thoại thì bạn có thể sử dụng giải pháp bằng CSS hoặc JavaScript. Trong bài viết này, giới thiệu đến các bạn giải pháp sử dụng CSS khá đơn giản với vài thao tác thực hiện.
Trước tiên, bạn cần thêm vài đoạn CSS dưới đây vào trong tập tin CSS trong Template của Website bạn.
.youtube {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.youtube iframe, .youtube object, .youtube embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}Tiếp đến, hãy bạn hãy copy mã nhúng của video trên Youtube cần đặt vào Website và cho vào thẻ <div class=”youtube”></div> như ví dụ dưới đây:
<div class="youtube"> <iframe width="640" height="360" src="/https://www.youtube.com/embed/Ss8RdZLPCvs" frameborder="0" allowfullscreen></iframe> </div>
Nếu như bạn chưa biêt cách lấy mã iframe youtube, bạn có thể tham khảo hướng dẫn dưới đây:
Bước 1: Vào Youtube và tìm Video mà các bạn muốn nhúng vào website hay blog của mình.
Bước 2: Chọn vào nút Share >> Embed >> Nhấp chuột phải rồi copy HTML code.
Bây giờ, bạn có thể đăng bài viết và kiểm tra kết quả reponsive của youtube hoặc vimeo,…
Với đoạn css trên thì video chèn vào Website của bạn sẽ tự động có chiều rộng full với chiều rộng của Website. Nếu như bạn muốn giới hạn chiều rộng video này, bạn có thể thêm dòng css dưới đây vào css của template:
.wy {
width: 80%;
max-width: 640px;
margin: 0 auto;
}Khi đó, đoạn video chèn vào bài viết của Website sẽ là:
<div class="wy"><div class="youtube"> <iframe width="640" height="360" src="/https://www.youtube.com/embed/Ss8RdZLPCvs"frameborder="0" allowfullscreen></iframe> </div> </div>
Hình code css mới được thêm vào.
Chúc bạn thành công!
