
You may have seen sticky, floating video on different websites like you are watching a video on any website and when you scroll down video is automatically fixed to the bottom of a webpage and when you scroll up the video Returns to its previous position that is basically called sticky floating video on page scroll.
You can add sticky, floating video on page scroll in blogger as well as in WordPress technique is same. for this tutorial we will be using the jQuery code to do that functionality.
I always try to provide you a demo and I will try to include the demo of this sticky floating video on page scroll you can scroll down and have a look on it.
So I will teach you or I will tell you how you can add this to your blogger blog for that you have to follow the steps which are listed below.
To make this functionality work properly you will need to have latest version of jQuery installed in your blogger blog.
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- Now Search for </head>
- Now copy the code provided below and paste it above ending head tag which we have founded in step 4.
- Save Theme/Template
- Now where, in your webpage you want to show your video use the html code provided below.
- If you don't need errors, Then use the code as it is just simple replace highlighted text in html code with youtube video id.
To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
<style>
@-webkit-keyframes fade-in-up {
0% {
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in-up {
0% {
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.video-wrap {
text-align: center;
}
.video iframe {
max-width: 100%;
max-height: 100%;
}
.video.stuck {
position: fixed;
bottom: 20px;
right: 20px;
-webkit-transform: translateY(100%);
transform: translateY(100%);
width: 260px;
height: 145px;
z-index:99999;
-webkit-animation: fade-in-up .25s ease forwards;
animation: fade-in-up .25s ease forwards;
}
</style>
<script>
//<![CDATA[
var $window = $(window);
var $videoWrap = $('.video-wrap');
var $video = $('.video');
var videoHeight = $video.outerHeight();
$window.on('scroll', function() {
var windowScrollTop = $window.scrollTop();
var videoBottom = videoHeight + $videoWrap.offset().top;
if (windowScrollTop > videoBottom) {
$videoWrap.height(videoHeight);
$video.addClass('stuck');
} else {
$videoWrap.height('auto');
$video.removeClass('stuck');
}
});
//]]>
</script>
<div class="video-wrap">
<div class="video">
<iframe width="600" height="340" src="https://www.youtube.com/embed/JnBJZDYH_dc" frameborder="0" gesture="media" allowfullscreen></iframe>
</div>
</div>
Conclusion:
This method works in all video providers like youtube, vimeo, etc That's it i think that this tutorial was helpful for you i provided you this tutorial now its your turn to give your feedback in the comment section below and let me know that you like this sticky, floating video on page scroll or not.
No funciona amigo debe haber algo mal en el código. ¿Puedes ayudarme?
ReplyDeletePost a comment
Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.