Vừa có người vào Hien.Mobi

Cách Chèn Video từ Youtube vào Blogspot trong khung LAPTOP

Youtube là một dịch vụ lưu trữ và chia sẽ Video phổ biến nhất hiện nay, Youtube cũng cho chép người dùng nhúng (hoặc chèn) trực tiếp video vào trong Blog/Website. Tuy nhiên Youtube lại không hỗ trợ chức năng Responsive khi ta sữ dụng mã nhúng (hay chèn) trực tiếp vào Blog/Website.
Nhưng đề có cái nhìn đẹp mắt hay tính thẩm mỹ cao thì không phải là điều dễ dàng. Thì hôm nay, mình hướng dẫn mọi người "Cách Chèn Video từ Youtube vào Blogspot trong khung LAPTOP".
☼ Bắt đầu thủ thuật !
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).

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

5
4
3
2
1

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

Đăng nhận xét

Đếm ngược thời gian đến tết Kỷ Hợi 2019