Lên đầu trang
Xuống cuối trang

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.

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.

<!-- [Thủ Thuật Blog] Chèn Video từ Youtube vào Blogspot trong khung Laptop có chức năng Responsive.
https://choiblogs.blogspot.com/2018/11/thu-thuat-blog-chen-video-tu-youtube.html
-->
<style>
.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/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/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;
}
}
</style>

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>

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


DOWNLOAD:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png
or
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzXplxsTdOeIHJJwuBdN8RTuOpQHCgy_1EFgND8QWM_gdJbFBJnRzuTtD0QbfoXOSz990sHHzUs0AJ279ilaqxtO9FFNujJSeQFV8_ntsEjttlo-fEVaVnpf5WTObqkIGQq54hd_xKiA/s1600/macbook+laptop+frame.png
or
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzXplxsTdOeIHJJwuBdN8RTuOpQHCgy_1EFgND8QWM_gdJbFBJnRzuTtD0QbfoXOSz990sHHzUs0AJ279ilaqxtO9FFNujJSeQFV8_ntsEjttlo-fEVaVnpf5WTObqkIGQq54hd_xKiA/s1600/macbook+laptop+frame.png
NGUỒN:
https://www.windows2it.com/2016/02/chen-video-tu-youtube-vao-blogspot-trong-khung-laptop-co-chuc-nang-responsive.html

Posted by Dung-Tran-Design Thứ Ba, 13 tháng 11, 2018

2 comments

  1. Nice article. I have implemented it like you said in this article on my blog and it is doing very good.

     
  2. Nặc danh Says:
  3. [Choiblogs]: [Thủ Thuật Blog] Chèn Video Từ Youtube Vào Blogspot Trong Khung Laptop Có Chức Năng Responsive >>>>> Download Now

    >>>>> Download Full

    [Choiblogs]: [Thủ Thuật Blog] Chèn Video Từ Youtube Vào Blogspot Trong Khung Laptop Có Chức Năng Responsive >>>>> Download LINK

    >>>>> Download Now

    [Choiblogs]: [Thủ Thuật Blog] Chèn Video Từ Youtube Vào Blogspot Trong Khung Laptop Có Chức Năng Responsive >>>>> Download Full

    >>>>> Download LINK

     

Đăng nhận xét

_ Khi nhận xét không phải xác minh từ.
_ Bạn nhận xét xong sẽ được quản lý duyệt.
_ Spam link vào nhận xét xem như bạn đã chưa nhận xét !
_ Ghé thăm tôi vào những lúc bạn vui hoặc buồn và khi cần hổ trợ gì đó !
_ Khi bài viết nào có lỗi: xin vui lòng góp ý chân thành! cảm ơn!!!

Nhãn Đám Mây

Software (755) Video (582) Video-Fun (227) Thủ Thuật Blog (211) System tools (184) Hài Kịch (182) Video-Pro (179) Pictures-Fun (161) Tin gì (156) Tin gì ? (154) THỦ THUẬT INTETNET (136) Wallpaper (123) Pictures-Girl Xinh (117) Gift of life (110) Internet Tools (105) Games (75) Template PTS (67) Skin-Gaw2 (66) Giải Trí (65) Others (60) Video-Shock (58) Thủ Thuật Máy Tính (48) Design Tools (46) Download Tools (43) Music (43) CSS ChoiBlogs (41) Anti-Virus (39) Sức Khoẻ (32) Kỹ Năng Sống (30) MultiMedia (28) Video-Tools (28) Cosplay (25) USB Tools (24) Browsers (22) Desktop (22) PDF Tools (22) Phim (22) Rar-Zip-Tool (22) Video-Animals (21) Burning- Convert (19) Thơ và Nhạc (19) Drivers (18) Hoài Linh (18) Media Player (18) Pictures-Pro (18) Rao Bán (18) Registry Tool (18) Thủ Thuật Yahoo (18) Khóa Thư Mục-WebĐen-EXE (15) Virus (15) Add or Remove Programs (14) Thơ (14) Video-SHOW (14) Phong Lee (13) Game-Web (12) Video-Tài Liệu (12) Hide-IP Tools (11) List Xem Nhanh ChoiBlogs (11) Photos -pictures tools (11) Video-Thể Thao (11) Free Licence (10) Office Tools (10) Task Manager Tool (10) Thủ Thuật Facebook (10) Thủ Thuật Photoshop (10) Thủ Thuật Youtube (10) Vietnam's Got Talent (10) WiFi Tools (10) -Cổ tích Việt Nam- (9) DVD-Tools (9) HDD Tool (9) Thủ Thuật Android (Thiết Bị Di Động) (9) Video- Sao Nối Ngôi (9) Video-Bình Tinh (9) Video-Music (9) Video-VÕ HẠ TRÂM (9) Video-Thời Sự (8) Video-Thủ Thuật Đời Sống (8) Defrag tools (7) Flash Tools (7) HTML Tool (7) Hacker Tool (7) MP3 Tools (7) Thuý Nga (7) Từ Khóa Google (7) Icon Tools (6) Kiếm Tiền Online (6) Music-Girl Xinh (6) Tình Yêu (6) Video-Gương Mặt Thân Quen 2016 (6) Chí Tài (5) Game Flash (5) Game Tools (5) Góc nhìn (5) Mobile Tools (5) Nguyen Thi Anh Vien (5) Translate Tools (5) Webcam Tool (5) skin-blog (5) Firewalls (4) Game-mini (4) Screensaver Tools (4) Video-Cờ Cá Ngựa (4) Video-Kim Tử Long (4) Video-Thể Hình (4) Font View (3) Templates (3) Windows 7 (3) Windows Tools (3) Actions PTS (2) Audio tools (2) Editing tools (2) Event-Online (2) Font (2) Game-DOWNLOAD (2) Game-MU Đại Thiên Sứ (2) Ghost WINDOWN (2) Host Free (2) Infographic (2) Keylogger Tools (2) Nghệ Sĩ Minh Béo (2) Nhật Cường (2) PTS Brush (2) PTS Style (2) Sống Đẹp (2) Video-Game (2) Video-Quân Sự (2) Đạo Đời (2) CPU-Tools (1) Camera (1) Camera giao thông (1) Chính Sách Mới - Pháp Luật (1) Coppy Tools (1) Công Nghệ (1) Cảnh Giác (1) Dương Thúy Vi-Wuhsu (1) File Hệ Thống (1) Files Manager (1) Game-Gaw2 (1) Ghost XP (1) Hack Blog (1) Hệ Điều Hành (1) Icon Cảm Xúc (1) Iphone-Tools (1) Khám Phá (1) Music- Pic-Pro (1) PDS PhoToShop (1) Phần Cứng (1) Portable (1) Soft-Test (1) Soft-Việt Hóa (1) Sách Nói (1) TIVI Online (1) Thủ Thuật - Proshow Producer (1) Thủ Thuật Mobile (1) Thủ Thuật-Cốc Cốc (1) Thủ Thuật Di Động (1) Thủ Thuật FireFox (1) Thủ Thuật Phần Cứng (1) Thủ Thuật office (1) Thủ Thuật Điện (1) Thủ Thuật Đời Sống (1) Tin-Bảo Mật (1) Tình Yêu và Cuộc Sống (1) Tiện Ích FireFox (1) Tiện Ích Mouse (1) Tuyển THành Viên (1) Tài Liệu - Biểu Mẫu (1) Tình Yêu Giới Tính (1) Tự Kỷ (1) Video Tools (1) Video-Công Nghệ (1) Video-Cảnh Giác (1) Video-Giao Thông (1) Video-Hướng Dẫn Làm (1) Video-Movie (1) Video-NSƯT Bạch Long (1) Video-Sáng Tạo (1) Video-Thủ Thuật - Proshow Producer (1) Video-Vietnam's Got Talent 2014 (1) Video-Đời Sống (1) Video-Ơn Trời Cậu Đây Rồi (1) Yahoo Chat (1) [Danh Sách] Karaoke MrChoiBlog (Karaoke-Beat-Chuẩn) (1)

Đăng ký nhận bài viết mới

Bài đăng phổ biến

New Commets