I'm trying to use this with Meteor and am not getting any video showing up.

in a video template-- <div id="video"> <div style="width: 500px; height: 500px;" data-vide-bg="woot/warthundervid" data-vide-options="loop: false, muted: false, position: 0% 0%"> </div> </div>

then ive tried both using this:

Template.video.onRendered( function() { this.$('#video').vide('woot/warthundervid'); });

which is whats recommended in the meteor package, and then doing it the "normal" way with just the jquery by itself

`$( document ).ready(function() {

    $('#video').vide('woot/warthundervid');

});`

havent got either to work yet. Any problems with that code? Do you have any working examples using Meteor?

Hi, first, thanks for the excellent work! I'm having and issues on my Nexus 7 (Android 5.1, Build LMY470) in Google Chrome (42.0.2311.111). The background image seems to load but then it disappears. I'm using the following code. Please let me know if you have any questions and thanks in advance for your help!

<div id="video-box">
    <div id="header">
        <h1>Headline</h1>
    </div>
    <div id="video-overlay"></div>
    <div id="overlay-text">
        Body Text
    </div>
    <div id="feature-video"></div>
</div>

$(document).ready(function () {
    jQuery("#overlay-text").fitText(1.5);
    $('#feature-video').vide('/img/header-video',{
        muted: true,
        loop: true,
        autoplay: true,
        resizing: true
    });
});

#video-box {
    position: relative; 
    #feature-video {
        z-index: 1; 
    }
    #feature-video, #video-box {
        width: 100%; 
        height: 500px;
    }
    #header {
        z-index: 3;
        background: #000000;
        color: #ffffff;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 80px;
        opacity: .7;
        h1 {
            margin: 0;
            padding: 0;
            font-size: 200%;
            font-weight: normal;
            line-height: 80px;
        }
    }
    #video-overlay {
        z-index: 2;
        position: absolute;
        top: 80px;
        right: 0;
        bottom: 0;
        left: 0;
        background: url(/img/pattern.png);
        opacity: 1;
    }
    #overlay-text {
        z-index: 4;
        position: absolute;
        top: 80px;
        right: 0;
        bottom: 0;
        left: 0;
        color: #2bb4b2;
        line-height: 100%;
        text-align: center;
        margin-top: 125px;
        text-shadow: 0 0 10px #ffffff, 0 0 10px #ffffff, 0 0 10px #ffffff;
    }
}

Hello,

I am trying to create an audio toggle button for my background video using your plugin. Using methods such as

.prop('muted', true)

and

.setVolume(0);

and

.mute();

via an onclick function but no joy. Any suggestions to help me along the way?

When I want to use video background and I didn't upload some type of file ( .jpg, .png ,....) . There is some bug notification on browser dedug. Please help me. Thanks you ! Jack Bui

Typically you'd only need one type of fallback image, so you'd never need to load multiple formats (plus it's unlikely anyone would save out multiple background formats for the same poster image).

Ideally you'd want to pull whatever poster image source format is specified and load only that one, regardless of the extension, so Vide doesn't try to find and load images that don't exist.

Is there anyway to make the video that is requested to use localstorage? I've notice that if the video is set to loop that it will continually make a request to the server and keep loading the video over and over again which can stack up over time.

Not sure if this is an encoding issue on my side or if this is a plugin issue, but eventually, a video looping will end up in an explosion of pastel digital coolness (except, that's not what the client ordered ;) )

Live at: www.cargosense.com

The first div created by the plugin that has z-index: -1 seems to be causing an issue for me. If I change the z-index to zero then the video shows, but if I leave it at negative one then the video is completely hidden.

There is nothing in the div aside from the code being written by the plugin to display the video.

Thoughts?

iOS 10 supports webkit-playsinline. Videos can be played inline and videos with no sound or sound disabled can autoplay. No need to disable video in iOS anymore.

How do I detect screen size and set height to 100% if position: relative is set?

I'm using bootstrap

<div class="row">
  <div id="video" data-vide-bg="assets/video">
 </div>
</div>

the following doesn't help, because position is relative

#video {
  background-size: cover;
  height: 100%;
}

I specify my posterType, but I still get 404s for all the other types.

$('.topHeader').vide({
      mp4: 'headerResources/light.mp4',
      poster: 'headerResources/light.jpg',
      posterType: 'jpg'
    });

GET http://localhost:9000/headerResources/light.gif 404 (Not Found)
GET http://localhost:9000/headerResources/light.jpeg 404 (Not Found)
GET http://localhost:9000/headerResources/light.png 404 (Not Found)

Can you make it stop looking for other ones, when the poster is defined please?

$('#bgv').vide({mp4:'/public/static/video/xxx.mp4'},{ muted: true, loop: false, autoplay: true }); If I set 'muted: false', video will not autoplay. I knew since Chrome 66, Google not allowed autoplay video with sound. But can VIDE slove this problem?