Need help with Tubular

Hello @vincent, @rowan @jaidenleach or anybody else

In respons of my formar topic, I have another question about video background,

I discovered Tubular, tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design It look like it’s ideal for my site. I read the instructions, but it’s to difficult for me to do, in short notice I will launch the site. Would one of you so kind to install that for me, i would love to pay for that. I use a template “waiters”

The owner of the video allows me only use of youtube.

Thanks in forward,
Corine

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

1 Like

Bon dia @Vincent,

How is it going in France? Here is all fine :slight_smile: and very very hot at the moment, it’s probebly 40-42 feeling-deg C at the moment. I have no airco at my workspace, it’s hard to live in the carib :smile: But I like this better than the rain in Europe and we have every weekend a mini-vacation on tropical beach .

I realise that mobiles don’t use this. I am in negotiate with the videomaker about the cost of 20 sec. raw-video right now.

I go at work with you’re description, looks difficult, but I try.

If this is working out, than I have other question, so as mute/play music, starting the video at a special point, etc.

Merci beaucoup!
grtzzz Corine

Sooo many pirates yes :wink: No rain here, still teeshirts and short, sail races and beacht time :smile:

No you should be ok I’ve broke it down as much as I could :smile:

Then you need a JS coder and using the Youtube API… which is known to be difficult and erratic to use.

1 Like

Hi Vincent,

It doesn’t work out yet, it isprobebly a problem within my dropbox. Don’t know what or wich file I have to put in it, sry…

I turned de z-index to 99 (i read this)?

https://preview.webflow.com/preview/divaliziamagazine?preview=ee95f7a221543ae8bdda4e95781be88d

Hope you can help me again,
grtzz Corine

The code input box gives you hints at how your code is correct, or not. See here, the script tags should be white

http://vincent.polenordstudio.fr/snap/2ep2i.jpg

you miss a “>” to close the first tag, and the url contains twice “https://”. Also we can get rid of the “?dl=0” at the end of the url, that’s a dropbox command.

so once fixed looks like this:

http://vincent.polenordstudio.fr/snap/ac0v6.jpg

Here is the code to paste:

<script> type="text/javascript" charset="utf-8" src="https://dl.dropboxusercontent.com/s/2pkcs7vp06gw84o/jquery.tubular.1.0.js></script>

<script>
$().ready(function() {
                $('#wrapper').tubular({videoId: 'KGWkMGXn_x8'}); // where idOfYourVideo is the YouTube ID.
        });
</script>

Try this, it should work now (:

wauw, amazing how fast! go try this!

Masha danki! Thanks! Merci beaucoup

Oh and that too!

http://vincent.polenordstudio.fr/snap/jew7x.jpg

tip: to be sure that your video bg is where you want with the dimensions you want, give it a bg color temporarily.

1 Like

Corine I made a mistake, the correct code is :smile:

   <script type="text/javascript" charset="utf-8" src="https://dl.dropboxusercontent.com/s/2pkcs7vp06gw84o/jquery.tubular.1.0.js"> </script>

<script>
$().ready(function() {
                $('#wrapper').tubular({videoId: 'KGWkMGXn_x8'}); 
        });
</script> 

Only the url was wrong, the tag doesn’t have to be closed right away, but we needed a " at the end of the url too.

1 Like

@Corine & @vincent
As an alternative to dropbox, you can search for CDN’s of the JS file.
This might be something to consider vs keeping the file on (a personal) dropbox.

http://cdn.jsdelivr.net/jquery.tubular/1.0.1/jquery.tubular.1.0.js

cheers,
Mike

although Tubular isn’t mobile friendly, it might be for the best, a mobile user might not want to eat up their data with streaming video…

Hi @misterkak,
Thanks for your answer, but i had to make some changes in the script. Is that possible in your solution?

Kind regards,
Corine

The change you’d require would be to change the source of the Tubular code. Simply change the part of the script where you see src=“https://…”
Replace the existing ‘http…’ with the ‘http…’ link I provided and it should work! (if your site requires the security then you can see if the links works using ‘https’)

Hi I also need help with Tubular. Just signed up, am trying to request demo as well as create dashboard. When I fill out info it keeps highlighting my email and zip code as though it’s incorrect (im assuming). Not sure what to do, I feel like I can’t utilize this site until this problem is fixed. PLEASE HELP!!! thank you

Hi @RomanToyGenius, I don’t understand what exactly the problem is, it seemes not a problem with Tubular, but a problem with your Dashboard?

Can you try explain the problem in other words? I think you have to add it to another topic. Maybe I can help you with that, cause I don’t understand coding and English very well…

grtzz Corine

basically it won’t accept my info so that i can use the site. it highlights my zip code and email as though it’s incorrect but it’s not.

@RomanToyGenius, I suggest you open a new topic or mail to webflow with this problem. I can’t help you with this and it seems nothing to do with tubular.

Saludos, Corine

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.