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> 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://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&theme=dark&controls=1&showinfo=0&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 !

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
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.
Read Reviews: 15 Hand-Picked Gaming laptops under 300 dollars
đăng tin miễn trên toàn quốc Sản phẩm công nghệ tự động độc quyền của TekDT
Website rao vặt online
usb cài win usb cài windows
Đăng nhận xét