YouTube / Vimeo Parallax

index.html

<div class="jarallax" data-jarallax data-jarallax-video="https://www.youtube.com/watch?v=F3I0wRGAkxo">
  <div class="demo-table">
    <div class="demo-table-cell">
      <h1>Just Another Parallax <small>[Jarallax]</small></h1>
      <h2>Background Video Parallax (YouTube &amp; Vimeo)</h2>

      <br>
      <a class="github-button" href="https://github.com/nk-o/jarallax" data-style="mega" data-count-href="/nk-o/jarallax/stargazers" data-count-api="/repos/nk-o/jarallax#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star nk-o/jarallax on GitHub">Star</a>
      <a class="github-button" href="https://github.com/nk-o/jarallax/archive/master.zip" data-style="mega" aria-label="Download nk-o/jarallax on GitHub">Download</a>
    </div>
  </div>
</div>
<div class="jarallax" data-jarallax data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0"></div>
<div class="demo-gap">
  <h3>Small gap</h3>
</div>
<div class="jarallax" data-jarallax data-jarallax-video="https://vimeo.com/110138539"></div>
<div class="jarallax" data-jarallax data-jarallax-video="https://vimeo.com/channels/staffpicks/151926492"></div>
<div class="jarallax" data-jarallax style="background-image: url(https://free.nkdev.info/jarallax/images/image5.jpg);"></div>

<div class="demo-gap">
  <p>
    Jarallax © 2016 _nK released under WTFPL license
  </p>
  <small>
    All images taken from <a href="https://www.pexels.com/">https://www.pexels.com/</a>
  </small>
</div>

<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>

scripts

<script src="https://unpkg.com/jarallax@1.10/dist/jarallax.min.js"></script>
<script src="https://unpkg.com/jarallax@1.10/dist/jarallax-video.min.js"></script>

styles

<link href="https://free.nkdev.info/jarallax/css/demo.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />

youtube-vimeo-parallax.markdown

YouTube / Vimeo Parallax

Add background YouTube and Vimeo parallax with Jarallax plugin. Not only video, but also high performance images parallax for free.

A Pen by nK on CodePen.

License.