Introduction

This partial allows a video to be embedded onto a site either in context of it parent size, perhaps maintaining aspect ratio; or as a full screen background.

Javascript allows for controls to control the video.

Setup

Bootstrap provide a responsive embed. Simply add

  • responsive: "16by9"
  • responsive: "4by3"

You cannot have a responsive embed and fullscreen set to true at the same time.

The poster is set within the CSS.


Default, autoplay and 16by9 responsive

= codeBlender "video", "atom", { autoplay: false, controls: true, fullScreen: true, responsive: false, src: "http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny" }
<div class='video'>
<div class='video__background'>
<video class='video--fullscreen' controls='controls' id='video1' poster='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' preload='none'>
<source src='http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.mp4' type='video/mp4'>
<source src='http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.webm' type='video/webm'>
</video>
</div>
</div>


Resources Useful websites and tutorials

Tasks

Task Date
Complete the example for full screen and embed