All Themes - Loop Background Video

Below are instructions to place a looping video without play controls into your site design. You can see an example of a similar implemenation on vidcaster.com

Implmentation Assumptions: 

  • You are a developer and/or are familiar with HTML code 
  • You agree and understand that this is a sample set of code and any other custom code may conflict causing the code to break. 
  • You may need to make additional CSS changes to this code. 

1) Place the following code in the base file of your theme

{% with item_list|first as first_item %}
	{% get_transcode first_item all %}
	{% with transcode|first as type %}
		<div class="header-unit">
			<div id="video-container">
				<video autoplay loop class="fillWidth">
				{% if is_https %}
				<source src="{{ type.get_proper_url_ssl|safe }}" type="video/mp4"/>
				{% else %}
				<source src="{{ type.get_proper_url|safe }}" type="video/mp4"/>
				{% endif %}
				Your browser does not support the video tag. I suggest you upgrade your browser.
				</video>
			</div><!-- end video-container -->
		</div><!-- end .header-unit -->    
	{% endwith %}
{% endwith %}

Assumptions & Notes 

  • Uses the first item from this {% get_items_by_filters item_list max_items=6 sorting=featured backfill_type=pub_date %}
  • Gets all the transcodes and picks the first one which is 1280x720
  • The get_transcode tag allows picking a specific transcode if you know it's short name. (i.e. low_320p, med_480p, or hd_720p) For example: {% get_transcode item hd_720p %}