Cập nhật 2026: Giao diện mới và hướng đi mới ! Xem chi tiết →

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

Hoàng Nhân Khôi Thứ Hai, 8 tháng 2, 2016
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> 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

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

Bài Viết Liên Quan

Bình Luận (14)

Unknown
Unknown lúc 04:00 3 tháng 4, 2016
Admin cho mình hỏi: trong phần Tạo bài đăng mới của Bloger cũng đã có sẵn chức năng chèn video, trong đó có cả từ Youtube rồi, chỉ khaccs là ko có trang trí.
Vậy chức năng năng bài viết này có thể sử dụng để gắn video vào trang chủ đc ko?
Cụ thể:
1. Nếu gắn vào trang chủ ở cột bên hoặc dưới chân thì có thể gắn bằng cách thêm tiện ích phải ko?
2. Nếu muốn trên trang chủ ko chỉ có mỗi phần Bài đăng mới, mà muốn có thể đặt video (hoặc những hình ảnh/thông tin khác) lên đó thì có làm đc ko hay phải do ng thiết kế mẫu từ đầu?
Cảm ơn Ad
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 04:10 3 tháng 4, 2016
....
1. Nếu gắn vào trang chủ ở cột bên hoặc dưới chân thì có thể gắn bằng cách thêm tiện ích phải ko? >>> Đúng như vậy (Nếu thiết kế của bạn có sẵn CSS hổ trợ).

2. Nếu muốn trên trang chủ ko chỉ có mỗi phần Bài đăng mới, mà muốn có thể đặt video (hoặc những hình ảnh/thông tin khác) lên đó thì có làm đc ko hay phải do ng thiết kế mẫu từ đầu? >>> Đương nhiên là do thiết kế bạn phải đụng tới CSS, JS và cả HTML nữa.
Unknown
Unknown lúc 04:28 3 tháng 4, 2016
Ừ cảm ơn Ad, ko hiểu làm thế nào :D đành phải đi tìm template nào có vậy nhỉ, mà hầu hết template cơ bản thì trang chủ chỉ có mỗi bài đăng mới :(
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 07:15 3 tháng 4, 2016
cái này mình dùng lênh if để can thiệp bạn à ... tìm hiểu một tí HTML là oke ngay :)
Unknown
Unknown lúc 02:58 26 tháng 4, 2016
không biết chèn video như thế nào với site này http://jinteaz.com/
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 03:20 26 tháng 4, 2016
Ở trên youtube nó có đường nhúng luôn đó bạn, bạn chèn vào thui ... Ngoài ra trang này diễn đàn có hosting riêng .... Nếu giàu có thì up trực tiếp lên luôn :)
Lê Hoan
Lê Hoan lúc 21:59 23 tháng 8, 2016
Bạn ơi, sao mình chèn nó toàn bị một nửa video vs một nửa cái hình vậy? chỉ mình với!
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 22:45 24 tháng 8, 2016
Cho mình xin địa chỉ blogspot bạn để mình kiểm tra thử xem.... :( chứ bạn nói vậy làm sao mình giúp được !!
Như Quỳnh
Như Quỳnh lúc 22:20 18 tháng 4, 2017
chào bạn,bạn cho mình hỏi,tại sao mình post phim lên nhưng khi xem lại xem k được.tks bạn
Như Quỳnh
Như Quỳnh lúc 22:21 18 tháng 4, 2017
đây là blog của mình:http://hayhay468.blogspot.com/
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 00:23 19 tháng 4, 2017
Cái template phim lỗi ko chỗ tả làm sao play được :(
Unknown
Unknown lúc 13:28 25 tháng 5, 2017
Video thì post bình thường đc có sao đâu nhỉ? ko hiểu lắm bài này
Jack Son
Jack Son lúc 13:06 12 tháng 3, 2019
It is powered by a 1.86 GHz processor, 2 GB RAM, 120 GB hard drive and three ports; USB 2.0, audio out and a Mini DV jack. However, this laptop is not recommended for long usage at a stretch as it gets too hot.
Read Reviews: 15 Hand-Picked Gaming laptops under 300 dollars

Đăng nhận xét