Cách tạo video nổi khi cuộn trang

 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ủ đề
Bước 5 việc còn lại của bạn là Thêm đoạn mã HTML có chứa video youtube của bạn vào bài chỉnh sửa HTML của mình là được òi. 


   <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 

Nếu bạn muốn thêm video không phải video từ Youtube thì sao? Câu trả lời còn phụ thuộc vào nhiều thứ. Nó phụ thuộc vào trang web mà liên kết video đến từ đâu, vì sau khi tôi thêm liên kết video từ Dailymotion và vidio.com, video không xuất hiện, trong khi liên kết video từ Google Drive có thể xuất hiện. Ví dụ như thế này:
   <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>

Tổng Kết 

Được rồi, đó là phần tôi hướng dẫn về cách tạo video nổi khi trang được cuộn. Hy vọng rằng với những mẹo này, bạn có thể làm cho trang web của mình thú vị hơn và tạo ra những ý tưởng mới để làm cho các mã khác nổi khi cuộn, ví dụ như nút chia sẻ trong phần bài đăng. tiền mặt nhận được

Post a Comment

Previous Post Next Post