CODEWITHSUNDEEP
javascripthtmlcssvideo
KrMa
KrMa

Reputation: 713

Control video background from JavaScript

I am working with a bootstrap template. I have organized my files in the root, and some php files in subfolders.

On my page here the video is working. This file is laying in the root

On my page here the video is not working. This file is laying in a subfolder

Question 1 : I cannot understand why the video is not playing in the subfolder?

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

site-1.php -> video 1

site-2.php -> video 2

site-3.php -> video 3

I have been searcing the javascript, there is controlling the videos. But cannot see any link to the video anywhere? JSFiddle

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.

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

            </div>
            <!-- banner end -->

UPDATE template.js

//Video Background
        //-----------------------------------------------
        if($(".video-background").length>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>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
                });
            };
        };

That code is looking like this : Example

I tried to add this code:

HTML

<div class="banner video-background-banner-test pv-40 dark-translucent-bg hovered">

JS

if($(".video-background-banner-test").length>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
                });
            };
        };

The video is played but there is a class there is not called? because the height is different: Example

Upvotes: 0

Views: 1506

Answers (1)

Lucas S.
Lucas S.

Reputation: 2401

That template uses a plugin called Vide for the video backgrounds. So you would look for either a data-vide-bg attribute or a line like $('selector').vide(options) which I found in template.js (line 1340 and following). That's where the paths are defined.

If you have control over that file, i.e. if you can edit it, you could add logic there to use different paths for your sub pages.

If you can't edit that file, you will need to destroy the previous Vide instance and create your own:

$('.video-background').data('vide').destroy();
$('.video-background').vide(pathOptions, playerOptions);

See here what pathOptions and playerOptions are.

Upvotes: 1

Related Questions