##### Loading...

Disable Preloader

## HTML5 Backgrounds Video

### Cool HTML5 Video

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

#### Embeding Process

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: true, 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: true, muted: false, position: 0% 0%">
      </div>

    <script>
        $('#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');
    </script>

#### Options

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

    <script>
        {
          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
        }
    </script>

#### Methods

    <script>
        // Get instance of the plugin
        var instance = $('#yourElement').data('vide');

        // Get video element of the background. Do what you want.
        instance.getVideoObject();

        // Resize video background.
        // It calls automatically, if window resize (or element, if you will use something like https://github.com/cowboy/jquery-resize).
        instance.resize();

        // Destroy plugin instance
        instance.destroy();
    </script>