8.3 – D.S. 7 – Fixing the Videos

Development Step SEVEN

Fixing the videos

Like I said in the ToDo list for this week, I don’t know which way is the easiest and best to solve my current problem with the video scaling to big. And while I’m at it I don’t want to waste time fixing this problem and then later when I upload my videos online just noticing that everything was a waste. So what I am doing instead is first of all reading myself through several different solutions and then trying to implement my videos on the website (so jumping to the final step/look) to then fix any visual problems.

Long story short, I just dived into google looking for a good way to save and play my videos. I went through these links (1, 2, 3, 4, 5) which took longer than expected but rewarded me with great knowledge. One possibility that I read quite often was to host the videos on youtube and then embed the links in my code, but to be honest, that will be the last thing I wanna do since I really don’t want ads on my videos. I am also considering Vimeo but I will take those once my last hope died. So I actually just checked how big the files are allowed to be if I upload them to WordPress and the limit is 500 mb. Since my videos are all around 100 mb I might actually be able to host them myself.

Now, I uploaded one video and I can just regularly watch it on this link. Before I upload all my videos, I have to check how to embed them into my code and how to use my code on my WordPress website, or If I need to make a new website without WordPress.

IDEA: I just randomly got the idea to take the link that WordPress provides me (where the video is saved) and include that in my current code in Brackets. And WOLLIA, IT WORKS! The video is playable and the interaction runs smooth as butter. (the video is a little laggy because of the screen recording). The only “bug” that I encounter is that it doesn’t play the video automatically, but I will get into that later.

Now I will upload a second video, just to have the switch working and to see if it works out, and then I can proceed.

Okay, so I have added a second clip and it works fine. But now I really need to fix the problem so the video buttons aren’t stuck to the video image.


I really don’t know how to explain this, but I just spent several hours trying to somehow fix my problem.
Problem: I just want a video to scale up and down with the browser and buttons that scale with the browser but to always stay below the video. I have been trying everything out with my code, like removing “position: absolute” which makes the button stick to my video but then, when one button increases size, all of the other buttons move. The only progress that I made so far, is putting “width=”1080″” into the video declaration in the html file so now my video doesn’t scale bigger than 1080 px. I also read through w3schools again, but it didn’t really help.

Then, suddenly, I opened a new tab, and it struck me. I saw the google window and noticed how they are also using a video with a button beneath. So I tried how they are dealing with the scaling and was kind of shocked that they made it so simple.

As you can see, the video never scales down or up. It always keeps it original size and just stays centered (same with the buttons). What I did, after I saw this, was inspecting the page and reading through every single line on how they structure the code and how they get everything centered. After I understood most of it I started copying the structure and using it on my code.

I added more divisions and gave those divisions extra attributes. I am quite sure that I have some useless stuff in my code now, but I can remove that once I am happy with the result. After taking over parts of the google structure, I noticed that my page already changed but the main problem was, that my video was “glued” to the left side of the screen. So once again I just googled on how to center a video and found this answer:

display: block;
margin: 0 auto;

I added this to my code, and changed the height of my buttons, and this is what I got out of it:

It took me a long time to actually got to this medium to easy solution, but if you look at my code you might see that I probably made it into the most difficult problem to solve.

But I guess thats just how it goes sometimes. Sometimes you just get completely stuck with something so simple that you oversee all the easy solutions. But what matters is not only the outcome but also the journey there, and I guess I went on a big one :D.

To finish this off I noticed that I don’t have any real way to pause the video so I thought of implementing a play/pause function again. Since I have the button done, I only need a way of implementing it, and I want to try to put it over the video so if you click it it toggles between playing and pausing.

I just put the play button back on visible which makes it just appear on top of the video now, and what I need is the button to be invisible and exactly the size of the video. Because I wasn’t sure how to solve it I googled and found this. And what someone was suggested was:

background: transparent;
border: none !important;

Adding this to my play button and adding a width and height of 200 px and a cursor so i now when im over it made it look like this for now:

The blue outlines are only there because I clicked it and I will remove those in the end with “outline: none;”. What I need now is to change the buttons behaviour so it doesn’t push the video down and then the buttons size. I am planning to use position absolute and just change width and height and will check on how it works.
Well.. The problem that I encounter when I make it as an absolute, is that it may not push the video away anymore but its also not clickable anymore. So I googled, how to put a button over video in css and found this, where they solve how to put an object like text over a video. The interesting thing is that he used:

z-index:0; and z-index:1;

Which is just (assuming) a way to place the objects on the z axis in front and behind of one another. It was easy to implement and made it work perfectly.

Now my button is over the video, invisible and clickable. The only problem now is that it isn’t “scaling” (moving) with the video. So its always stuck in the top left corner and not following the video. But since I already have some centring buttons I should be able to take their code and use on this new one.

Side Note: Sometimes googling different things can help.

I actually googled one more time: “css make a clickable video” and immediately found out here that I can just add

onClick="playPause();"

just like with a button, to a video and it uses my function. As funny and ridiculous as it may sound, but I noticed while working with the video and trying to scale the button over it, that my video isn’t HD (1280p – 720p) as its supposed to be, but its 1080 p wide, so I changed it to 1280p width which makes the buttons to appear almost offscreen, so the viewer is basically forced to scroll but I already have a good idea on how to implement this into the whole theme of the interactive box.

And this is what I now have with the newest feature:

Retrospective:

Now, after this problem appears to be fixed I can finally head into the next Development Step. Even tho I am basically through with most of my looks and functionalities, I still have things to change and see a lot to improve in here, like changing the button stile again and adding a background.
All in all this dev step was a lot of frustration and making everything complicated for myself but nonetheless I have grown because of that and also reached my set goals. So I am looking forward to have everything to work out at least a little better in the next Development Step.