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.
Bootstrap provide a responsive embed. Simply add
You cannot have a responsive embed and fullscreen set to true at the same time.
The poster is set within the CSS.
= 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>
Title | URL |
---|---|
Bootstrap responsive embed | http://getbootstrap.com/components/#responsive-embed |
Angular video embed | https://gang-demo.herokuapp.com/demo#/ngVidBg |
HTML5 video events | https://www.w3.org/2010/05/video/mediaevents.html |
Task | Date |
---|---|
Complete the example for full screen and embed |