10.3 – D.S. 9 – Hosting the videos

Development Step Nine

Hosting the videos

It’s me again! So I actually just spent almost an hour reading through all the Vimeo guidelines on what I am allowed to upload, whats copyrighted and what the benefits are for me to use Vimeo over YouTube and I now decided that I want to upload all my videos to Vimeo since they don’t play any ads and with a normal subscription (that I can try for 30 days) I can even customize the video player.
To do this, first I uploaded one of my videos to Vimeo and then read into how to embed this into my page. Vimeo had a good explanation, so through that I got the embedding code for my video from Vimeo itself and it looks like this:

<iframe src="https://player.vimeo.com/video/297625607" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

As you can see they use an iframe, which is something I have never worked this, but just to try it, I am now going to switch it out with my video.

Okay, so now that I switched to iframe, basically my whole code breaks. Everything was written around the video file and doesn’t synergise with the iframe. So if I would wan’t to use that I would need to change my whole code again. Also I would need to get a subscription at Vimeo which isn’t the best thing. So what my solution to this would be, since the current links through WordPress work, I am going to render every video again in a smaller resolution so I can more easily quickly load them and so they take away less storage on WordPress. Because the one issue that I encountered when I opened the website on a new Wifi, was that it first had to load the video for several seconds which isn’t too pleasing. Since my videos are currently full hd and take up at least 100 MB each, I need to size them down.

So after a lot of rendering, exporting and waiting, I did not just export all videos, but also uploaded them on my WordPress page. I also included all the links in my code and it was working perfectly. I also noticed that the loading time is way shorter and everything feels smoother now.

And now to the final step, UPLOADING EVERYTHING to the INTERNET!

To do that, I needed help. Professional help.

I had, to call my brother..

Since we already had a domain, He told me to install Cyberduck which looks somewhat like this:

We then set up my login and website, and after a while I was able to just put my index.html, style.css and data folder into the website and it worked. The website is now online on this link: julien.truebiger.de/interactivefilm.
After visiting the website on different devices I noticed that since I removed the ability to scroll, some laptops can’t see the buttons at the button, so I had to jump back into my css code and remove the overflow: hide. Now my website has all the functionalities and is available online. It still has some flaws and things I need to implement but generally I am super satisfied so far.

Since this was only more or less 4 hours of work, I decided to split this Development Step into two smaller parts, so here comes the second one.

Development Step Nine And a Half

Visual Feedback

I didn’t really know how to call this development step but I thought problem solving would come close to what I am planning to do. So first of all I actually have to rearrange the order of all the movies, because currently when you go onto the website it starts alphabetically (from Action to Comedy… and so on), but in my original project It started with western and moved on differently because I thought its better to start with something recognisable.

Edit: I changed the name to visual Feedback.

And the easiest way to do that was renaming the “src1 – src18” so they would call out different movies.

The correct order, now is:  western – noire – horror – anime – action – bloopers

Now, where this is done and I have all my videos uploaded, I need some kind of indication on the website that shows the current genre and item. I could do that either by having a plane text somewhere just for indication, or for example have the genre button say the current genre and the objects increase size if active.

To do that I started with the genre button changing the text. For that I actually found a good example in like the 4th dev step or something so I looked back over it and checked how it was done.

var btnTxt = [

function changeText(){
if(txtPosition !== btnTxt.length){
btn.innerHTML = btnTxt[txtPosition];
txtPosition += 1;

The most interesting part was the variable that had several names that then get called by going through txtPosition + 1.

So I tried implementing this part in my code. To do that I implemented the variable btnTxt with all the 6 different Genre names, and then, instead of creating a new function, putting the btn.innerHTML = btnTxt[txtPosition]; inside of my button click. But to make the text get displayed correctly I changed txtPostion to currentGenre. The problem that I now encountered was that everything behind this line of code wouldn’t work, which means that something in the line is missing because it basically stops the code. So I looked at what it said and saw that I forgot to creat the variable

var btn = document.getElementsByClassName('buttonG')[0];

The weird thing that happened now, was that the button did change its name when I clicked but it always was one genre ahead and when it started from the beginning again it would say “undefined”. So what I just did was adding

var btnTxt = [

a Western in the beginning and in the end and it actually worked :D. Since this is now solved I will look into showing the active item.

My idea was that if for example the banana is active it should just be bigger or maybe glow, so I read into how to change an html button with js since there are no if statements in css. I tried w3schools but wasn’t totally successful. But once I found this threat on StackOverflow I managed to implement the following into my code:

var but = document.getElementById("ba");
but.style.width = '120px';
but.style.height = '120px';

Now I only had to add it to every button and make the buttons go back to 100px when another one is pressed and this is my result:

As you can see, the user now always nows the current genre and items, so the last missing visual feedback is the play pause function. For that I am thinking of a simple play button that appears when you pause the video just how they do it with the WordPress videos.

For that I just took a Play button image and threw it into the division with my video border. then I created a variable with a link to the play-button. I also arranged the position with css and then just added the function

butP.style.visibility = "hidden"; / butP.style.visibility = "visible";

to whenever the video is paused.

This is my result (photo) and I was very satisfied with it:

(function is also working, trust me)

But then reality somehow hit me really hard. After I just imported the button and the new html+css file through Cyberduck into my website, this was the confusing result:

I am not just confused but also hard-stuck at this problem. I seriously don’t understand the problem since the html, css and image files are the same and even the browser that I’m using is the same. So there shouldn’t be any difference between my preview from brackets and my online version. To fix this I just went ahead, put my image in its own division and changed some values. Now the video button just displays below the video which is also fine because it is depending on the browsers. On safari for example everything is working fine, so I am just going to make my own button and that should be it for this Development Step.


This is now the last week and as it being the 9th development step its also almost the last one that I am making. My website/product looks really nice and I am extremely happy with all the progress I made. I am also looking forward to my last Development Step which is going to add a “menu” to it so people know what this is all about and which puts more depth into this project. So I guess I will see you in the last development step!