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

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.

Đọc thêm:

● Tạo phân trang cho Blogspot (Blogger) Version 2

● Hướng dẫn cách tạo Subdomain (Tên miền phụ) cho Blogspot

☼ Giờ bắt đầu thủ thuật cùng Windows2it.

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

Dưới đây là kết quả xem trước cho các bạn khó tính:

☼ 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

Backlink: Hoàn thiện công tác quản trị nguồn nhân lực

Quá trình cài đặt gặp vấn đề gì cứ để lại Comment !