Hi Corine how are things going?
Do you realize that Tubular, as handy as it is, doesn’t solve anything regarding background videos on mobile? It won’t play auto and will always display the YT poster with the Play button? Browse the site on your smartphone to see what I mean. You’ll still have the option to hide this element for mobile and (my suggestion) use a small animated GIF for devices instead.
I think you can manage to install that by yourself, let’s try.
Let’s have a look at the instructions from Google Code Archive - Long-term storage for Google Code Project Hosting.
1 Load the jQuery core on your page.
Well you don’t need this one because Webflow does call Jquery anyway, because interactions use it.
2 Load the tubular plugin. tubular must be called AFTER the previous two calls.
This one you need. Copy this code:
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
… and paste it exactly here, at page level:
http://vincent.polenordstudio.fr/snap/v5739.jpg
Drag a DIV in your Body, give it a class name like “video bg”, and a height of 100 VH (type in the unit VH and enter)
http://vincent.polenordstudio.fr/snap/hfzd0.jpg
Still with the div selected, click on settings and give it a unique ID “wrapper”.
http://vincent.polenordstudio.fr/snap/tuu7u.jpg
Go to youtube and copy the ID of the video in the URL
http://vincent.polenordstudio.fr/snap/3u08s.jpg
Update the code below with your video ID
<script>
$().ready(function() {
$('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID.
});
</script>
Copy the code with the previous code:
http://vincent.polenordstudio.fr/snap/d08yt.jpg
Go to Google Code Archive - Long-term storage for Google Code Project Hosting. and download the plugin, extract the jquery.tubular.1.0.js file from the archive, put it on dropbox and grab the sharing link:
http://vincent.polenordstudio.fr/snap/aejyd.jpg
You will get a link like this:
https://www.dropbox.com/s/wme3mn4303fw13j/jquery.tubular.1.0.js?dl=0
Replace www.dropbox.com by dl.dropboxusercontent.com so you get:
https://dl.dropboxusercontent.com/s/wme3mn4303fw13j/jquery.tubular.1.0.js?dl=0
Update your script with this link, there:
http://vincent.polenordstudio.fr/snap/ste3a.jpg
Publish and profit:
http://vincent.polenordstudio.fr/snap/5jl17.jpg