examples/block-bg.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Block background example</title>
  <style>
    html, body {
      margin: 0;
    }
  </style>
</head>
<body>

<!-- Easy as hell -->
<div id="block" style="width: 100%; height: 500px;" data-vide-bg="video/ocean" data-vide-options="position: 0% 50%"></div>

<br><br>

<div id="block2" style="width: 100%; height: 500px;"
  data-vide-bg="mp4: video/ocean, webm: video/ocean, ogv: http://vodkabears.github.io/vide/video/ocean, poster: video/ocean"
  data-vide-options="position: 0% 50%">
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
<script>
//  $(document).ready(function () {
//    $('#block').vide('video/ocean'); // Non declarative initialization
//
//    var instance = $('#block').data('vide'); // Get the instance
//    var video = instance.getVideoObject(); // Get the video object
//    instance.destroy(); // Destroy instance
//
//    $('#block2').vide({
//      'mp4': 'video/ocean',
//      'webm': 'video/ocean',
//      'ogv': 'video/ocean',
//      'poster': 'video/ocean',
//    });
//  });
</script>
</body>
</html>