LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Scroll Down

Floating sticky iframe video (youtube and vimeo) on page scroll. When you scroll so after end of iframe it will visible on right bottom and meanwhile you can play or pause.

CSS
/*Floating CSS Start*/
.wrapper{
  width:500px;
  margin:0 auto;
}
        @keyframes fade-in-up {
            0% {
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .stuck {
            position: fixed;
            bottom: 20px;
            right: 20px;
            transform: translateY(100%);
            width: 260px;
            height: 145px;
            animation: fade-in-up .25s ease forwards;
            z-index: 999;
        }

        /*Floating CSS End*/

@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: #ff7037;}
    50%  {background-color: red;}
    100% {background-color: #ff7037;}
}
p.scrolldown {
    width: 200px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border: 1px solid;
    background: #ff7037;
    position: fixed;
    right: 75px;
    color: #fff;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 2s;
}
JS
/*Floating Code for Iframe Start*/
                if (jQuery('iframe[src*="https://www.youtube.com/embed/"],iframe[src*="https://player.vimeo.com/"],iframe[src*="https://player.vimeo.com/"]').length > 0) {
                    /*Wrap (all code inside div) all vedio code inside div*/
                    jQuery('iframe[src*="https://www.youtube.com/embed/"],iframe[src*="https://player.vimeo.com/"]').wrap("
"); /*main code of each (particular) vedio*/ jQuery('iframe[src*="https://www.youtube.com/embed/"],iframe[src*="https://player.vimeo.com/"]').each(function(index) { /*Floating js Start*/ var windows = jQuery(window); var iframeWrap = jQuery(this).parent(); var iframe = jQuery(this); var iframeHeight = iframe.outerHeight(); var iframeElement = iframe.get(0); windows.on('scroll', function() { var windowScrollTop = windows.scrollTop(); var iframeBottom = iframeHeight + iframeWrap.offset().top; //alert(iframeBottom); if ((windowScrollTop > iframeBottom)) { iframeWrap.height(iframeHeight); iframe.addClass('stuck'); jQuery(".scrolldown").css({"display": "none"}); } else { iframeWrap.height('auto'); iframe.removeClass('stuck'); } }); /*Floating js End*/ }); } /*Floating Code for Iframe End*/

Description

Floating sticky iframe video (youtube and vimeo) on page scroll. When you scroll so, after end of iframe it will visible on right bottom of page and meanwhile you can play or pause.
Term
Sat, 04/14/2018 - 20:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv