Liên hệ đặt quảng cáo

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> 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 !
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

14 nhận xét:

  1. 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

    Trả lờiXóa
    Trả lời
    1. ....
      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.

      Xóa
    2. Ừ 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 :(

      Xóa
    3. 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 :)

      Xóa
  2. không biết chèn video như thế nào với site này http://jinteaz.com/

    Trả lờiXóa
    Trả lời
    1. Ở 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 :)

      Xóa
  3. 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!

    Trả lờiXóa
    Trả lời
    1. 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 !!

      Xóa
  4. 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

    Trả lờiXóa
    Trả lời
    1. Cái template phim lỗi ko chỗ tả làm sao play được :(

      Xóa
  5. đây là blog của mình:http://hayhay468.blogspot.com/

    Trả lờiXóa
  6. Video thì post bình thường đc có sao đâu nhỉ? ko hiểu lắm bài này

    Trả lờiXóa
  7. 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

    Trả lờiXóa