Việc nhúng video YouTube vào trang web hay blog giúp người xem có thêm tư liệu nội dung để tham khảo, và cũng tăng lượng người truy cập vào trang web.
Thao tác nhúng video YouTube cũng rất đơn giản. Các bạn có thể nhúng video của mình hay từ bất kỳ kênh YouTube nào khác mà không cần đăng nhập tài khoản Google. Các bạn chỉ việc vào video muốn nhúng, bấm chia sẻ- > Nhúng rồi copy mã code YouTube cung cấp và về trang web hay blog của mình dán vào nơi muốn hiển thị là xong.
Thường thì khi lấy mã nhúng video như vậy thì YouTube sẽ cho sẵn chiều cao và rộng khung hình video là width="560" height="315". Hoặc các bạn có thể chỉ sửa nó theo ý của mình nhưng khung hình video sẽ không đẹp cũng như có thể bị bóp méo đi.
Bài này mình chia sẻ với các bạn một thủ thuật nhỏ. Để khi các bạn nhúng video vào Blog sẽ luôn có được khung hình chuẩn 16:9 mà không cần phải chỉnh thống số "width, height". Và thêm vào đó một đoạn mã ngắn để loại bỏ các thương hiệu khác mà YouTube đề xuất trong video của các bạn.
Các bạn xem qua và kiểm tra thử với nhiều kích thước màn hình khác nhau tại .
Thủ thuật đơn giản như sau:
- Khi lấy mã nhúng từ YouTube sẽ có dạng:
width="560" height="315" và thêm cho nó cặp thẻ <div> với class="video_wrapper". Chúng ta sẽ được:<div
class="video_wrapper">
<iframe
src="https://www.youtube.com/embed/z9yHrTYkCuk" title="YouTube
video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
- Tiếp theo viết cho nó một chút CSS buộc video phải luôn có toàn bộ chiều rộng của vùng chứa và duy trì một tỷ lệ khung hình cụ thể. Trong trường hợp này là tỷ lệ 16: 9
position:
relative;
padding-bottom:
56.25%;
padding-top:
25px;
height:
0;
}
.video_wrapper iframe {
position:
absolute;
top:
0;
left:
0;
width:
100%;
height:
100%;
}
?rel=0&modestbranding=1&showinfo=0 ngay sau ID videoYouTube để loại bỏ các thương hiệu khác mà YouTube đề xuất trong video.- Hoàn thiện đoạn code chúng ta sẽ có như sau:
<div class="video_wrapper">
<iframe
src="https://www.youtube.com/embed/z9yHrTYkCuk?rel=0&modestbranding=1&showinfo=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<style>
.video_wrapper {
position:
relative;
padding-bottom:
56.25%;
padding-top:
25px;
height:
0;
}
.video_wrapper iframe {
position:
absolute;
top:
0;
left:
0;
width:
100%;
height:
100%;
}
</style>
Xác định ID videoYouTube
"https://www.youtube.com/watch?v=z9yHrTYkCuk" thì dãy ký tự "z9yHrTYkCuk" là ID videoYouTube
Facebook