Sticky videos

index.html

<div class="page">
  <div class="video-wrap">
    <div class="video">
      <iframe width="600" height="340" src="https://www.youtube.com/embed/pfqkRYSs4Rg" frameborder="0" gesture="media" allowfullscreen></iframe>
    </div>
  </div>
  
  <div class="content">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi blanditiis recusandae distinctio optio commodi tenetur quisquam qui porro, aliquid inventore perferendis quibusdam at! Quisquam illum distinctio eveniet corrupti cupiditate quis?</p>
    
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi blanditiis recusandae distinctio optio commodi tenetur quisquam qui porro, aliquid inventore perferendis quibusdam at! Quisquam illum distinctio eveniet corrupti cupiditate quis?</p>
    
    <h2>Lorem ipsum dolor sit.</h2>
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sequi delectus ducimus temporibus debitis natus, aliquam impedit saepe, doloribus a modi consectetur fugit unde? Maxime illo molestiae libero? Molestias labore ratione necessitatibus veniam. Doloremque nesciunt rerum incidunt nam ad quo sed porro, molestias mollitia aut, quaerat provident minima ab harum?</p>
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptate consectetur ab velit aut eligendi, ullam accusantium cupiditate doloremque nisi eius culpa sunt quibusdam deserunt officiis? Ipsam deserunt et tenetur nihil quidem velit harum? Id quisquam voluptates eligendi est nobis harum impedit commodi soluta et sint sequi, quod quidem consequuntur dolorem corrupti vitae omnis. Obcaecati ratione sapiente exercitationem quis dolore.</p>
    
    <h2>Lorem ipsum dolor sit.</h2>
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sequi delectus ducimus temporibus debitis natus, aliquam impedit saepe, doloribus a modi consectetur fugit unde? Maxime illo molestiae libero? Molestias labore ratione necessitatibus veniam. Doloremque nesciunt rerum incidunt nam ad quo sed porro, molestias mollitia aut, quaerat provident minima ab harum?</p>
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptate consectetur ab velit aut eligendi, ullam accusantium cupiditate doloremque nisi eius culpa sunt quibusdam deserunt officiis? Ipsam deserunt et tenetur nihil quidem velit harum? Id quisquam voluptates eligendi est nobis harum impedit commodi soluta et sint sequi, quod quidem consequuntur dolorem corrupti vitae omnis. Obcaecati ratione sapiente exercitationem quis dolore.</p>
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptate consectetur ab velit aut eligendi, ullam accusantium cupiditate doloremque nisi eius culpa sunt quibusdam deserunt officiis? Ipsam deserunt et tenetur nihil quidem velit harum? Id quisquam voluptates eligendi est nobis harum impedit commodi soluta et sint sequi, quod quidem consequuntur dolorem corrupti vitae omnis. Obcaecati ratione sapiente exercitationem quis dolore.</p>
    
    <h2>Lorem ipsum dolor sit.</h2>
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sequi delectus ducimus temporibus debitis natus, aliquam impedit saepe, doloribus a modi consectetur fugit unde? Maxime illo molestiae libero? Molestias labore ratione necessitatibus veniam. Doloremque nesciunt rerum incidunt nam ad quo sed porro, molestias mollitia aut, quaerat provident minima ab harum?</p>
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptate consectetur ab velit aut eligendi, ullam accusantium cupiditate doloremque nisi eius culpa sunt quibusdam deserunt officiis? Ipsam deserunt et tenetur nihil quidem velit harum? Id quisquam voluptates eligendi est nobis harum impedit commodi soluta et sint sequi, quod quidem consequuntur dolorem corrupti vitae omnis. Obcaecati ratione sapiente exercitationem quis dolore.</p>
  </div>
</div>

script.js

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');
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

sticky-videos.markdown

Sticky videos

A Pen by Vassilis Mastorostergios on CodePen.

License.

style.scss

// Give the page a bit of height so that we can scroll
body {
  line-height: 1.6;
}

.content {
  max-width: 600px;
  margin: 10px auto;
}

@keyframes fade-in-up {
  0% { opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.video-wrap {
  text-align: center;
}

.video {  
  iframe {
    max-width: 100%;
    max-height: 100%;
  }

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

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />