> How to quick attach a background video in Drupal

  • Posted on: 4 November 2015
  • By: tihomiry

Having a video background gives you a lot of expression and dynamics to your site.
There a few ways to put your video as a background of your page layout.
1. Use Drupal video background module or similar. The thing is that it uses html 5 player and support only local video files. Also there is a limitation of 5Mb with make this quite useless.
2. Use a ready theme with a background video. This is the easiest way, but I did not find a good free one. There are some paid one that could be good choice.
3. Do some changes in your theme code to attach the video background without touching the Drupal core and engine. All happened in the HTML front-end content.

For the last approach you need to use external JS library or attach the video with embedded iframe.
Best choice is MP4 video uploaded to YouTube. This will allow you play large videos with good performance without affecting the performance of the rest of the site.
For this blog I did use tubular js. I did include it in the first parent of the page layout: html.tpl.php. Also did modify style.css to make font colors readable.
The video had been shot by me with Pentax k-5 and SMC Pentax M 50mm 1:1,7.

$().ready(function() {
                    $('#vi').tubular({videoId: 'X_KrIme7Cd4'}); // where idOfYourVideo is the YouTube ID.
                    });

URL: https://www.seanmccambridge.com/tubula/

Most of the modern LED backlight screens including Laptops, TV and smart phones use PAM technique for Pulse-amplitude modulation. This means that they switch on and off state very rapidly.

Comments: 1

Having a video background gives you a lot of expression and dynamics to your site.
There a few ways to put your video as a background of your page layout.

Pages