Integrating a video in to a website is some thing very common. I love a good video instead of a slider. It gives a feeling of liveliness.

There are many ways to host videos. I believe in a "batteries included" approach. Hence I generally host such videos locally. But when clients request to use YouTube, I would use the mb.ytplayer plugin. Since some time now you can't remove / stop the page logo and title showing up from time to time when the video plays. Thus we decided to host the video locally.

These were the changes I made to get an effect like this:

View & Video Placement

Rails has a helper for video HTML5 tag. That is video_tag. It assumes that the files are stored in the public/videos folder. You will have to place the video and commit it to git.

Here I have only one format and am waiting to get the files. It is good to cover other formats as well.

⇒  tree public
public
├── 404.html
├── 422.html
├── 500.html

└── videos
    └── bg.mp4

Now we can reference the video in the view:

    section#home
      #video-wrapper
        = video_tag 'bg.mp4', muted: true, autoplay: true, loop: true

Note: The auto play the video you need to set muted. Otherwise the browser will ignore the autoplay attribute. You can't auto play with the audio. But you can do it using JavaScript. In case you want to play with audio or the HTML5 attributes are not audio playing on their own, you may try the JavaScript solution (next).

JavaScript

Try this only if you want to auto play the video with sound or the HTML5 attributes muted autoplay loop etc are not working as advertised (which happens rarely, I am not sure why).

I am a sucker for OOP and classes.

class @VideoBG
  @setup: ->
    element = document.querySelector('#video-wrapper video')
    element.muted = false
    element.loop = true
    element.autoplay = true
    element.play()

Since I am on a Rails project that utilises TurboLinks there are no page loads when you click on pages. Instead we need to watch for turbolinks:load event.

configure = ->
  VideoBG.setup()

document.addEventListener "turbolinks:load", ->
  configure()

Styling

Out of the box the video is going to fit. So there are going to be bars on the side if you don't match the exact aspect ratio. But what I wanted was a "fill" effect. I used the following CSS:

#video-wrapper
  video
    position: absolute
    z-index: 0
    background: assset-url(homepage-video-bg.jpg) no-repeat
    background-size: 100% 100%
    top: 0px
    left: 0px // fixed to left. Replace it by right if you want
    min-width: 100%
    min-height: 100%
    width: auto
    height: auto

Conclusion

I come from a time long before playing a video without a tool like Flash was not possible. Every time I use an HTML5 tag, like video, reminds me how much the internet has progressed and appreciate all the hard work that has been invested in the technology to make us developers and consumers life better.

Now you don't need fancy plugins to play video. How ever I still use the VideoJS plugin. It comes with some interesting video players. But if its a background like this, I just use the video tag.