Chèn Video từ Youtube vào Blogspot trong khung Laptop có chức năng Responsive

 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.

.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/AVvXsEjtWNW-FXlGE4WRxEmLzQ8rLDWWDMhMJ3EV__xvm1KPn8C6KLk6gBhap7W8pvfZ8QmPcBqXUjQPdebIPR5mndT9r5rA5BtpEiOK3qK52Mf_FP5vlQRSxPbP5nC61tjMv8zR8m8MrkNEdpc/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWNW-FXlGE4WRxEmLzQ8rLDWWDMhMJ3EV__xvm1KPn8C6KLk6gBhap7W8pvfZ8QmPcBqXUjQPdebIPR5mndT9r5rA5BtpEiOK3qK52Mf_FP5vlQRSxPbP5nC61tjMv8zR8m8MrkNEdpc/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWNW-FXlGE4WRxEmLzQ8rLDWWDMhMJ3EV__xvm1KPn8C6KLk6gBhap7W8pvfZ8QmPcBqXUjQPdebIPR5mndT9r5rA5BtpEiOK3qK52Mf_FP5vlQRSxPbP5nC61tjMv8zR8m8MrkNEdpc/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWNW-FXlGE4WRxEmLzQ8rLDWWDMhMJ3EV__xvm1KPn8C6KLk6gBhap7W8pvfZ8QmPcBqXUjQPdebIPR5mndT9r5rA5BtpEiOK3qK52Mf_FP5vlQRSxPbP5nC61tjMv8zR8m8MrkNEdpc/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;
}
}  

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>  
☼ Tù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 JJJ