hí xin chào mọi người nha, nay thì mình xin hướng dẫn mọi người nha, nay thì mình xin chia sẽ cho mọi người một cái tip nữa. với cái này thì nó sẽ liên quan đến phần video và web của chúng ta giúp cho mọi người thuận tiện trong việc khi xem các video trên web hơn.
Có thể bạn đã xem video trên Youtube, Vidio hoặc các trang khác mà khi video đang phát và bạn cuộn trang xuống, video sẽ tự động theo nơi bạn cuộn trang. Hoạt động của các thủ thuật mà tôi sẽ chia sẻ gần như giống nhau, nhưng điểm khác biệt là video sẽ vẫn trôi theo trang mà chúng ta cuộn mặc dù video chưa được phát.
Xem Demo
Cách đây ít lâu, mình đã chia sẻ thủ thuật Cách cài đặt Video Youtube tùy chỉnh trên blog, bằng cách đó các video Youtube được thêm vào trong bài sẽ tự động theo kích thước màn hình của thiết bị bạn đang sử dụng. Chà, trong mẹo này, kimidev sẽ kết hợp các mẹo video tùy chỉnh với các mẹo video nổi khi cuộn. Những ai quan tâm có thể làm theo các bước dưới đây.
Làm cho video nổi khi cuộn trang
bước 1: đăng nhập vào trang chủ blogger --> chủ để --> chỉnh sửa html
Bước 2 tìm cho mình thẻ ]]></b:skin> và thêm đoạn code bên dưới vào phía trên nó
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;float:left;overflow:hidden;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}.floatvideo-wrapper{text-align:center}.floatvideo iframe{max-width:100%;max-height:100%}.floatvideo.fly{padding:0;position:fixed;bottom:20px;right:20px;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);-webkit-transform:translateY(100%);transform:translateY(100%);width:260px;height:145px;-webkit-animation:fade-in-up .25s ease forwards;animation:fade-in-up .25s ease forwards;z-index:99}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media screen and (max-width:640px){.floatvideo.fly{bottom:10px;right:10px;width:160px;height:85px}.video-responsive{padding-bottom:54%}}
Bước 3: tìm cho mình thẻ </body> và dán đoạn code bên dưới vào phía trên
cảu thẻ </body>
<script>
// <! [CDATA [
// Video nổi
var $ window = $ (window), $ floatvideoWrap = $ (". floatvideo-wrapper"), $ floatvideo = $ (". floatvideo"), floatvideoHeight = $ floatvideo.outerHeight (); $ window.on ("scroll" , function () {$ window.scrollTop ()> floatvideoHeight + $ floatvideoWrap.offset (). top? ($ floatvideoWrap.height (floatvideoHeight), $ floatvideo.addClass ("fly")): ($ floatvideoWrap.height ("auto "), $ floatvideo.removeClass (" fly "))}), setTimeout (function () {$ (". video-youtube "). each (function () {$ (this) .replaceWith ('<iframe class = "video-youtube loader" src = "'+ $ (this) .data (" src ") +'" allowfullscreen = "allowfullscreen" height = "281" width = "500"> </iframe> ')})} , 5e3);
//]]>
</script>
Bước 4 Lưu chủ đề
<div class = 'floatvideo-wrapper'>
<div class = 'floatvideo'>
<div class = 'youtube video'>
<div class = 'video-responsive'>
<div class = 'video-youtube loader' data-src = '// www.youtube.com/embed/tO01J-M3g0U'> </div>
</div>
</div>
</div>
</div>
Nhớ là thây link video youtube thành link video khác mà bạn mong muốn
<div class = 'floatvideo-wrapper'>
<div class = 'floatvideo'>
<div class = 'youtube video'>
<div class = 'video-responsive'>
<div class = 'video-youtube loader' data-src = '// drive.google.com/file/d/0B0Ay6s7CmaBAaHNXbFAtLVZ3ZFU/preview'> </div>
</div>
</div>
</div>
</div>
Để thêm video thừ iframe mà không phải youtube thì các bạn dùng mã
sau nha.
<div class = 'floatvideo-wrapper'>
<div class = 'floatvideo'>
<iframe width = '600' height = '340' src = 'LINK-VIDEO-HERE' frameborder = '0' inherit = 'media' allowfullscreen> </iframe>
</div>
</div>
