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,.pngor.gifextension:
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.