jrue · February 16, 2025 13:14
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Page Title</title>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   
   <!-- Download from http://mediaelementjs.com/ We only need the build folder -->
   <script src="build/mediaelement-and-player.min.js" type="text/javascript" charset="utf-8"></script>
   <link rel="stylesheet" href="build/mediaelementplayer.min.css" type="text/css" media="screen" charset="utf-8">
   
   <style type="text/css" media="screen">
     
     /* When using media element player, hide controls completely */
     .mejs-container .mejs-controls { display:none !important; }
     
     /* Change these as needed for your container. For best results video size should match container */
     #container{
       position:relative;
       width:1024px;
       height:768px;
       overflow:hidden;
       margin:20px auto;
       background:none; 
     }
     
     /* Everything inside container should be above video */
     #container *{
       position:relative;
       z-index:10;
     }
     
     /* video should be underneath */
     video{
       position:absolute;
       z-index: 1;
     }
     
   </style>
   <script type="text/javascript" charset="utf-8">
   
     /**
      * We are using MediaElement JS to create better compatibility with older browsers.
      * It uses a Flash fallback, and a background image if necessary.
      *
      */
     jQuery(document).ready(function($){
       
       //this activates MediaElement player to ensure playback on multiple devices/browsers
       $('video').mediaelementplayer({
         'loop':true,
         'clickToPlayPause':false,
         success:function(player, dom, mediaelement){
            
           //As background video, make sure it's position absolutely
           mediaelement.container[0].style.position = 'absolute';
           mediaelement.container[0].style.zIndex = '1';
           
           //background video should autoplay
           player.play();
         }
          
       });
     });
   </script>
 </head>
 <body>
   <div id="container">
    
     <!-- Video starts here. Change width and height throught this code block to match video size -->
     <video width="1080" height="768" controls="false">
       
       <!-- MP4 Version of the video to play on iOS, Chrome and IE -->
       <source src="intro_town.mp4" />
       
       <!-- Flash fallback for non-HTML5 browsers without JavaScript, and FireFox -->
       <object width="1080" height="768" type="application/x-shockwave-flash" data="build/flashmediaelement.swf">
         <param name="movie" value="build/flashmediaelement.swf" />
         <param name="flashvars" value="controls=false&file=intro_town.mp4" />
         
         <!-- Image as a last resort -->
         <img src="myvideo.jpg" width="1080" height="768" title="No video playback capabilities" />
       </object>
     </video>
     
     <!-- Start content here that should show above video -->
     <h1 style="color:white;">Content Will Go Here </h1>
   </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Page Title</title>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

	<!-- Download from http://mediaelementjs.com/ We only need the build folder -->
	<script src="build/mediaelement-and-player.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="build/mediaelementplayer.min.css" type="text/css" media="screen" charset="utf-8">

	<style type="text/css" media="screen">

	/* When using media element player, hide controls completely */
	.mejs-container .mejs-controls { display:none !important; }

	/* Change these as needed for your container. For best results video size should match container */
	#container{
	position:relative;
	width:1024px;
	height:768px;
	overflow:hidden;
	margin:20px auto;
	background:none;
	}

	/* Everything inside container should be above video */
	#container *{
	position:relative;
	z-index:10;
	}

	/* video should be underneath */
	video{
	position:absolute;
	z-index: 1;
	}

	</style>
	<script type="text/javascript" charset="utf-8">

	/**
	* We are using MediaElement JS to create better compatibility with older browsers.
	* It uses a Flash fallback, and a background image if necessary.
	*
	*/
	jQuery(document).ready(function($){

	//this activates MediaElement player to ensure playback on multiple devices/browsers
	$('video').mediaelementplayer({
	'loop':true,
	'clickToPlayPause':false,
	success:function(player, dom, mediaelement){

	//As background video, make sure it's position absolutely
	mediaelement.container[0].style.position = 'absolute';
	mediaelement.container[0].style.zIndex = '1';

	//background video should autoplay
	player.play();
	}

	});
	});
	</script>
	</head>
	<body>
	<div id="container">

	<!-- Video starts here. Change width and height throught this code block to match video size -->
	<video width="1080" height="768" controls="false">

	<!-- MP4 Version of the video to play on iOS, Chrome and IE -->
	<source src="intro_town.mp4" />

	<!-- Flash fallback for non-HTML5 browsers without JavaScript, and FireFox -->
	<object width="1080" height="768" type="application/x-shockwave-flash" data="build/flashmediaelement.swf">
	<param name="movie" value="build/flashmediaelement.swf" />
	<param name="flashvars" value="controls=false&file=intro_town.mp4" />

	<!-- Image as a last resort -->
	<img src="myvideo.jpg" width="1080" height="768" title="No video playback capabilities" />
	</object>
	</video>

	<!-- Start content here that should show above video -->
	<h1 style="color:white;">Content Will Go Here </h1>
	</div>
	</body>
	</html>