Chèn video từ Youtube vào Blog trong khung Laptop kết hợp với Responsive

Chèn video từ Youtube vào Blog trong khung Laptop kết hợp với Responsive

Chắc hẳn các bạn làm blog hay web đều đã bết nhiều thủ thuật hay cho blog và trong đó là nhúng video từ youtube vào blog hay website của bạn theo cách thông thường là lấy Mã nhúng cuả Youtube copy vào HTML của bài viết .Nhưng làm theo cách  đó thì nhìn video khá đơn điệu và nó không có chức năng Responsive (tương thích với các kích cỡ màn hình khác nhau ) Điều đó khiến cho người sử dụng thấy rất khó chịu khi một video tương thích với màn hình máy tính khí hiển thị trên điện thoại sẽ bị khuất hình .Hôm nay mình sẽ giới thiệu với các bạn một cách chèn video vào blogsport vừa đẹp lại vừa có chức năng Responsive .


Xem Thêm :

• Hướng dẫn tạo Playlist nhạc cho blogsport
•  Hướng dẫn tạo nút G+ ở góc phải blog
• Hướng dẫn tạo điểm nhấn cho comment của tác giả 

Chúng ta hãy cùng bắt đầu nhé :

Bước 1 : Các bạn vào Blog >> Mẫu >>Chỉnh sửa HTML >> Ctrl F  tìm thẻ </b:skin> .Sau đó dán đoạn code phía dưới đây vào trên thẻ </b:skin> và Lưu Mẫu

.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/AVvXsEjes7F6kyNo3DcXXw04VpzfSiPHvdzG0-42sxb3IOZjHZwS7GjO006eUThAuAN10th5UQQOmO75CkPwcxkS8Ncbms8ioSUZoI78Plv-rWcKGuIfsxJ2Db30Sgtoy1rcM0PoPlM7tIh5S-o/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjes7F6kyNo3DcXXw04VpzfSiPHvdzG0-42sxb3IOZjHZwS7GjO006eUThAuAN10th5UQQOmO75CkPwcxkS8Ncbms8ioSUZoI78Plv-rWcKGuIfsxJ2Db30Sgtoy1rcM0PoPlM7tIh5S-o/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjes7F6kyNo3DcXXw04VpzfSiPHvdzG0-42sxb3IOZjHZwS7GjO006eUThAuAN10th5UQQOmO75CkPwcxkS8Ncbms8ioSUZoI78Plv-rWcKGuIfsxJ2Db30Sgtoy1rcM0PoPlM7tIh5S-o/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjes7F6kyNo3DcXXw04VpzfSiPHvdzG0-42sxb3IOZjHZwS7GjO006eUThAuAN10th5UQQOmO75CkPwcxkS8Ncbms8ioSUZoI78Plv-rWcKGuIfsxJ2Db30Sgtoy1rcM0PoPlM7tIh5S-o/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 của bạn từ Youtube cào Blog bằng code 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&theme=dark&controls=1&showinfo=0&autohide=0" frameborder="0" allowfullscreen=""></iframe> </div> </div>

Thay id : 6bnUdWKrfd4 bằng Id video của bạn nhé < Id này trong bước 2 >
Các bạn có thể thay đổi kích thước khung tùy ý của bạn ,khi đổi kích thước của khung thì bạn cũng phải đổi kích thước cảu video sao cho phù hợp và khớp với khung nhé

Như thế là xong rồi đấy .
Các bạn thấy khung hình này thế nào rất đẹp phải không .
Thấy hay thì hãy share cho mọi người nhé
Có thắc mắc gì bạn hãy để lại comment nhé
Chúc cá bạn thành công.

Demo cho các bạn :