Multiple parallax video backgrounds

问题

I found answers here on stackoverflow on how to create video div with parallax effect The recommended plugin was: https://github.com/linnett/backgroundVideo

However I need multiple of parallax backgrounds on one site and I am having trouble with that, first one in order is allright, but the others are misspositioned, dont work absolutely as you would expect

What is a solution for this? Calling the same plugin for every background separately? How do I do that?

This doesnt quite work:

<script>
  $(document).ready(function() {
    $("#my-video").backgroundVideo();
    $("#my-video2").backgroundVideo();
  });
</script>

This is HTML of video element:

<div id="video-wrap" style="height: 300px;">
  <video id="my-video" preload="metadata" autoplay loop>
    <source src="blahblah/video/video1.mp4" type="video/mp4">
  </video>
</div>

回答1:

Ok i figuerd out the solution

You have to have differend video wrap ID for each of parallax video you want to display and then specify it in JS

HTML:

<div id="video-wrap1" class="video">
  <video id="my-video1" preload="metadata" autoplay loop>
    <source src="<?php echo get_template_directory_uri(); ?>/video/video1.mp4" type="video/mp4">
  </video>
</div>

<div id="video-wrap2" class="video">
  <video id="my-video2" preload="metadata" autoplay loop>
    <source src="<?php echo get_template_directory_uri(); ?>/video/video1.mp4" type="video/mp4">
  </video>
</div>
...

JS:

$(document).ready(function() {
$("#my-video1").backgroundVideo({$videoWrap: $('#video-wrap1')});
$("#my-video2").backgroundVideo({$videoWrap: $('#video-wrap2')});
...

Works as charm :)

回答2:

The plugin has been updated to allow for multiple videos, check the example use: https://github.com/linnett/backgroundVideo

来源：https://stackoverflow.com/questions/34697532/multiple-parallax-video-backgrounds

标签

video

background

parallax