I can't get my my background video to be unmuted using the Vide Jquery documentation

Viewed 40

So I'm following all the steps and I have the website working fine, But I can't figure out how to just un-mute the thing. At this point, I've tried everything I know how.

Here's my HTML:

            <!--=================================
            = BACKGROUND HOLDER
            ==================================-->
            
            <div class="bg-holder zindex-0">
                
                <!-- OVERLAY -->
                <b data-bgholder="overlay" class="full-wh zindex-2" data-lgradient="y" data-radial-gradient="rgba(0,0,0, 0)|rgba(0,0,0,0)"></b>
                
                <!-- HOST VIDEO VIDEO -->
                <div data-bgholder="hvideo" class="full-wh bg-cover bg-cc zindex-1" data-vide-src="videos/coverr-girl" data-vide-options="muted: false">
                
                </div>
                
            </div>
            <!-- ======= END : BACKGROUND HOLDER =======  -->

        </div>

And here's my JavaScript:

            /*----------  HOSTED VIDEO  ----------*/
    ckav.hostVideo = function (element) {
        'use strict';

        var videofile = element.attr("data-vide-src");

        
        element.animate({ opacity: 1 }, 500, function () { });
        element.vide({
            mp4: videofile,
            webm: videofile,
            ogv: videofile,
            poster: videofile + ".jpg"
        }, 
        {
            volume: 1,
            playbackRate: 1,
            muted: false,
            loop: true,
            autoplay: true,
            position: 'center center', // Similar to the CSS `background-position` property.
            posterType: 'jpg', // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
            resizing: true, // Auto-resizing, read: https://github.com/VodkaBears/Vide#resizing
            bgColor: 'transparent', // Allow custom background-color for Vide div,
            className: '' // Add custom CSS class to Vide div
        });
        
        
    }

And here's what the ReadMe document says:

Prepare your video in several formats like '.webm', '.mp4' for cross browser compatibility, also add a poster with .jpg, .png or .gif extension:

path/
├── to/
│   ├── video.mp4
│   ├── video.ogv
│   ├── video.webm
│   └── video.jpg

Add data-vide-bg attribute with a path to the video and poster without extension, video and poster must have the same name. Add data-vide-options to pass vide options, if you need it. By default video is muted, looped and starts automatically.

<div style="width: 1000px; height: 500px;"
  data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>

Also you can set extended path:

<div style="width: 1000px; height: 500px;"
  data-vide-bg="mp4: path/to/video1, webm: path/to/video2, ogv: path/to/video3, poster: path/to/poster"
  data-vide-options="posterType: jpg, loop: false, muted: false, position: 0% 0%">
</div>

In some situations it can be helpful to initialize it with JS because Vide doesn't have mutation observers:

$('#myBlock').vide('path/to/video');
$('#myBlock').vide('path/to/video', {
...options...
});
$('#myBlock').vide({
  mp4: path/to/video1,
  webm: path/to/video2,
  ogv: path/to/video3,
  poster: path/to/poster
}, {
...options...
});
$('#myBlock').vide('extended path as a string', 'options as a string');

Easy.

Options

Below is a complete list of options and matching default values:

{
  volume: 1,
  playbackRate: 1,
  muted: true,
  loop: true,
  autoplay: true,
  position: '50% 50%', // Similar to the CSS `background-position` property.
  posterType: 'detect', // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
  resizing: true, // Auto-resizing, read: https://github.com/VodkaBears/Vide#resizing
  bgColor: 'transparent', // Allow custom background-color for Vide div,
  className: '' // Add custom CSS class to Vide div
}

Now I've tried adding in the data-vide-options to manually change it. and it doesn't seem to take. Is there another way, or what exactly am I missing here. Video's playing on landing page just fine, I just can't seem to un-mute it for the life of me.

0 Answers
Related