Need help with Tubular

Design help General
#1

Hello @vincent, @rowan @jaidenleach or anybody else

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

I discovered Tubular, http://www.seanmccambridge.com/tubular/ 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

#2

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 https://code.google.com/p/jquery-tubular/

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 https://code.google.com/p/jquery-tubular/downloads/list 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:

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
Tubular Glitch On The Editor
Tubular Glitch On The Editor
#3

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

#4

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
#5

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

#6

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 (:

#7

wauw, amazing how fast! go try this!

Masha danki! Thanks! Merci beaucoup

#8

Oh and that too!

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

#9

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
#10

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
#14

@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

#15

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…

#16

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

#17

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’)

#19

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

#20

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

#21

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.

#22

@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

#23

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