Mình đã xuất bản 2 bài viết nói về các chằn Video từ Youtube vào Blogspot. Theo mình nghĩ, hai bài viết trước đó của mình lại không hoàn hảo: Bài thứ nhất: Đơn thuần là tạo chức năng Responsive cho Video _ Nhưng lại không trang trí (tạo hiệu ứng). Bài thứ hai: Đơn thuần là trang trí (Tạo hiệu ứng) cho Video _ Nhưng lại không có chức năng Responsive.

Đến với bài viết hôm nay, mình sẽ gộp cả hai chức năng trên lại với nhau để đưa ra thủ thuật hoàn hảo nhất về cách chằn Video từ Youtube vào Blogspot mà mình đã phát hành.

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin> và Lưu mẫu lại.

<!-- [Thủ Thuật Blog] Chèn Video từ Youtube vào Blogspot trong khung Laptop có chức năng Responsive.
https://choiblogs.blogspot.com/2018/11/thu-thuat-blog-chen-video-tu-youtube.html
-->
<style>
.tb_outer_wrap {
width: 100%;
max-width: 650px;
margin: 15px auto;
}
.tb_video_wrap_macbook {
position: relative;
padding-bottom: 43%;
padding-top: 0;
height: 0;
overflow: hidden;
-webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
border-color: rgba(0, 0, 0, 0);
border-width: 27px 76px 55px 76px;
border-style: inset;
}
.tb_video_wrap_macbook iframe, .tb_video_wrap_macbook object, .tb_video_wrap_macbook embed {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #ddd;
}
@media (max-width: 500px) {
.tb_video_wrap_macbook {
border-width: 20px 62px 40px 62px;
}
@media all and (max-width: 400px) {
.tb_video_wrap_macbook {
border: none !important;
}
}
</style>

Bước 2: Nhúng Video từ Youtube vào trong bài viết bằng cú pháp dưới đây:

<div class="tb_outer_wrap">
<div class="tb_video_wrap_macbook">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6bnUdWKrfd4?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>

ùy chỉnh:

· Thay phần tô màu vàng thành ID Video của bạn.

· Các Bạn có thể thay đổi khung khác nhưng phải tùy chỉnh lại kích thước chiều cao và chiều rộng (Giống như khung hình Mình đã đưa ra ở trên).

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều.

DOWNLOAD:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png
or
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzXplxsTdOeIHJJwuBdN8RTuOpQHCgy_1EFgND8QWM_gdJbFBJnRzuTtD0QbfoXOSz990sHHzUs0AJ279ilaqxtO9FFNujJSeQFV8_ntsEjttlo-fEVaVnpf5WTObqkIGQq54hd_xKiA/s1600/macbook+laptop+frame.png
or
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzXplxsTdOeIHJJwuBdN8RTuOpQHCgy_1EFgND8QWM_gdJbFBJnRzuTtD0QbfoXOSz990sHHzUs0AJ279ilaqxtO9FFNujJSeQFV8_ntsEjttlo-fEVaVnpf5WTObqkIGQq54hd_xKiA/s1600/macbook+laptop+frame.png