Multiple videos on multiple sections.

[niklasquitzau]

Is it in any way possible to have more than one video playing as background on other sections on one page? And if yes, then how? :)

Thanks for a great plugin, btw!

[damonbauer]

Haven't tested, but you should be able to just make a new call to the plugin, with whichever selector you want the video to play in. For instance:

var video1 = new $.backgroundVideo($('#section1'), { ... };
var video2 = new $.backgroundVideo($('#section2'), { ... };

[niklasquitzau]

Thank you for your quick reply!

I have tried it now, but it doesn't seem to work.
It outputs the html fine (<video ... >) but I can see that the id in the video-tag is the same as my first video: id="video_background"- any ideas?

Thank you :)

[damonbauer]

In your plugin call, give each video a unique id, like:

var video1 = new $.backgroundVideo($('#section1'), {
    videoid: "video1",
    ....
};

var video2 = new $.backgroundVideo($('#section2'), {
    videoid: "video2",
    ....
};

[niklasquitzau]

That worked beautifully! Thank you sir!

Now, I have a little problem with position: fixed because all of my content scrolls right over the video, as it is not moving. I have then set the position to absolute which solved my problem with the first video, but now the second video is positioned in the top behind my first video and not as a background in the section further down on the page.. Hope this makes sense. Any help is greatly appreciated :)

Thanks again.

[damonbauer]

Totally makes sense. This is a CSS issue rather than a plugin issue. I'd suggest reading about CSS positioning.

I think what you're looking for is to have 2 sections that have position: relative, then place each video inside of those with position: absolute.

position: absolute works off of it's parent. If there isn't a parent, it is absolute to the window. However, if you put it inside of a div with position: relative, the position: absolute div is placed in relation to the div, not the window.

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
http://learnlayout.com/position.html
http://learn.shayhowe.com/html-css/box-model

[niklasquitzau]

Thank you very much for you help, damonbauer.

I will look into it - i figured that's where the problem probably was. Thanks again!

[niklasquitzau]

Aaaaaand, it's working.

Thanks, and closing 👍