Control video background from JavaScript
<p>I am working with a bootstrap template. I have organized my files in the root, and some php files in subfolders.</p>

<p>On my page <a href="http://roulettesuite.com/personlighed.php" rel="nofollow noreferrer">here</a> the video is working. This file is laying in the root</p>

<p>On my page <a href="http://roulettesuite.com/kompetencer/kompetence-template.php" rel="nofollow noreferrer">here</a> the video is not working. This file is laying in a subfolder</p>

<p>Question 1 : I cannot understand why the video is not playing in the subfolder?</p>

<p>Question 2 : I would like to control which videos there is played at specific sites. Fx:</p>

<p>site-1.php -> video 1</p>

<p>site-2.php -> video 2</p>

<p>site-3.php -> video 3</p>

<p>I have been searcing the javascript, there is controlling the videos. But cannot see any link to the video anywhere? <a href="https://jsfiddle.net/jevtzm02/" rel="nofollow noreferrer">JSFiddle</a></p>

<p>I thought that the link to the video would be in the html, but there is no link to which video there should be displayed here.</p>

<pre><code>&lt;!-- banner start --&gt;
            &lt;!-- ================ --&gt;
            &lt;div class="banner video-background-banner pv-40 dark-translucent-bg hovered"&gt;
                &lt;div class="container"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col-md-8 text-center col-md-offset-2 pv-20"&gt;
                            &lt;h2 class="title object-non-visible" data-animation-effect="fadeIn" data-effect-delay="100"&gt;About Us&lt;/h2&gt;
                            &lt;div class="separator object-non-visible mt-10" data-animation-effect="fadeIn" data-effect-delay="100"&gt;&lt;/div&gt;
                            &lt;p class="text-center object-non-visible" data-animation-effect="fadeIn" data-effect-delay="100"&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

            &lt;/div&gt;
            &lt;!-- banner end --&gt;
</code></pre>

<p><strong>UPDATE</strong>
<strong>template.js</strong></p>

<pre><code>//Video Background
        //-----------------------------------------------
        if($(".video-background").length&gt;0) {
            if (Modernizr.touch) {
                $(".video-background").vide({
                    mp4: "videos/background-video.mp4",
                    webm: "videos/background-video.webm",
                    poster: "videos/video-fallback.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 100%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            } else {
                $(".video-background").vide({
                    mp4: "videos/background-video.mp4",
                    webm: "videos/background-video.webm",
                    poster: "videos/video-poster.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 100%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            };

        };
        if($(".video-background-banner").length&gt;0) {
            if (Modernizr.touch) {
                $(".video-background-banner").vide({
                    mp4: "videos/background-video-banner.mp4",
                    webm: "videos/background-video-banner.webm",
                    poster: "videos/video-fallback.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 50%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            } else {
                $(".video-background-banner").vide({
                    mp4: "videos/background-video-banner.mp4",
                    webm: "videos/background-video-banner.webm",
                    poster: "videos/video-banner-poster.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 50%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            };
        };
</code></pre>

<p>That code is looking like this : <a href="http://roulettesuite.com/personlighed.php" rel="nofollow noreferrer">Example</a></p>

<hr>

<p>I tried to add this code:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="banner video-background-banner-test pv-40 dark-translucent-bg hovered"&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>if($(".video-background-banner-test").length&gt;0) {
            if (Modernizr.touch) {
                $(".video-background-banner-test").vide({
                    mp4: "videos/background-video-banner.mp4",
                    webm: "videos/background-video-banner.webm",
                    poster: "videos/video-fallback.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 50%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            } else {
                $(".video-background-banner-test").vide({
                    mp4: "../videos/background-video-banner.mp4",
                    webm: "../videos/background-video-banner.webm",
                    poster: "../videos/video-banner-poster.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 50%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            };
        };
</code></pre>

<p>The video is played but there is a class there is not called? because the height is different: <a href="http://roulettesuite.com/kompetencer/kompetence-template.php" rel="nofollow noreferrer">Example</a></p>