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

  • 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: "" }
<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='' type='video/mp4'>
<source src='' type='video/webm'>

Resources Useful websites and tutorials


Task Date
Complete the example for full screen and embed