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

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:




☼ 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://4.bp.blogspot.com/-9SlILeH9ikA/VboLX1JtwsI/AAAAAAAABUM/M5vmGSMXzBc/s1600/macbook%2Blaptop%2Bframe.png') 50 233 112 228 stretch stretch;
    -moz-border-image: url('https://4.bp.blogspot.com/-9SlILeH9ikA/VboLX1JtwsI/AAAAAAAABUM/M5vmGSMXzBc/s1600/macbook%2Blaptop%2Bframe.png') 50 233 112 228 stretch stretch;
    -o-border-image: url('https://4.bp.blogspot.com/-9SlILeH9ikA/VboLX1JtwsI/AAAAAAAABUM/M5vmGSMXzBc/s1600/macbook%2Blaptop%2Bframe.png') 50 233 112 228 stretch stretch;
    border-image: url('https://4.bp.blogspot.com/-9SlILeH9ikA/VboLX1JtwsI/AAAAAAAABUM/M5vmGSMXzBc/s1600/macbook%2Blaptop%2Bframe.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).
Share:
✔ Bạn muốn viết bài lên Blog Hay, muốn chia sẻ tâm sự, kinh nghiệm bất cứ ý tưởng gì muốn chia sẻ với mọi người mời kích vào đây

Không có nhận xét nào