Star Trường IT

Star Trường IT

TIN TỨC

FACEBOOK

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


  • 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/AVvXsEjpux4OCHPFmuLjnQD3n-Z-H6VOJ8wlwQkVYAM1C-WlA6AJljBNpVKFDtC7EXQD0dvocpgeSXlCs8tJhLMPtE_MBMdt4KKVy-GrLEzsthfyL3cDaqmaICvIOhM2Bv8Gh8avsjY6eCQpdHY/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpux4OCHPFmuLjnQD3n-Z-H6VOJ8wlwQkVYAM1C-WlA6AJljBNpVKFDtC7EXQD0dvocpgeSXlCs8tJhLMPtE_MBMdt4KKVy-GrLEzsthfyL3cDaqmaICvIOhM2Bv8Gh8avsjY6eCQpdHY/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpux4OCHPFmuLjnQD3n-Z-H6VOJ8wlwQkVYAM1C-WlA6AJljBNpVKFDtC7EXQD0dvocpgeSXlCs8tJhLMPtE_MBMdt4KKVy-GrLEzsthfyL3cDaqmaICvIOhM2Bv8Gh8avsjY6eCQpdHY/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpux4OCHPFmuLjnQD3n-Z-H6VOJ8wlwQkVYAM1C-WlA6AJljBNpVKFDtC7EXQD0dvocpgeSXlCs8tJhLMPtE_MBMdt4KKVy-GrLEzsthfyL3cDaqmaICvIOhM2Bv8Gh8avsjY6eCQpdHY/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/
SCFUFUyH83Q?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div> 
 





Chèn Video từ Youtube vào Blogspot trong khung Laptop có chức năng Responsive Reviewed by theodoidienthoai on 10:11:00 Rating: 5
Bản Quyền Thuộc: Thủ Thuật Máy Tính - Tin Học Tốt Nhất Dành Cho Bạn © 2016. Chia sẻ Thủ Thuật | Phần Mềm | Ảnh Đẹp | PSD Tổng Hợp
Thiết kế bởi Phạm Long Trường

Góp Ý Cho Long Truong Actor

Tên

Email *

Thông báo *

Được tạo bởi Blogger.