Final Reflection

Reflection

This is my final reflection of about 200 words.

Looking back at this project and all the progress I made, looking back at all the problems I encountered and solved, I am really happy and satisfied with this project. I have to admit that I was insecure in the beginning of this quartile because I neither really new what I wanted to do and what I was going to do. But after I just started to work on the idea of making my last quartiles project into an online version so I can implement it into my portfolio, things started to get to rolling. The cool thing about this project was that it was about working on stuff you can show off in your portfolio and I feel like I really managed to do that.

Also blogging about all of this and making all of those dev steps always made me realize how far I was and helped me keeping track of all the work I have done. Not to lie it was really difficult and annoying from time to time but I think looking back at it it is a really good way to help the creative flow not to get lost.

So yeah, that was it from me and I am looking forward to all the new challenges and things coming.

10.4 – D.S. 10 – Finalising the Product

Development Step Ten

Finalising the product

I have made it! This is not only the last week, but also the last development step. Looking back at all my previous dev steps and the progress I made, I have to admit that I am indeed proud of all the developments I have done. I also have my interactive movie online and to be watched by everyone. I still have a few more things to add before it is perfect. And that is why this last development step is called finalising my product.

My plans are to add some kind of help/about window that pops up the first time you visit the window and which is also viewable when you click some kind of question mark button. I also noticed that some browsers have the video quite big, which is why i am probably putting an arrow pointing downwards so people now that there is something to click if they don’t immediately see the buttons.

To jump right in I googled “how to have a pop up window in html css when visiting website”. First I found this link but when further investigating it, it felt too specific and complicated since it wouldn’t have brought me to my goal, so I looked a little more and found this Stack Overflow question where someone how can i create pop up window that loads when you enter the site?. The top answer was well up voted so I looked at it and brought the code over to my brackets. The javascript part was really small and basically only closes the window if the x is pressed.

lightBoxClose = function() {
  document.querySelector(".lightbox").classList.add("closed");
}

But I had to change the first line to:

function lightBoxClose () {}

to make it work. Then I added the html, and here I encountered the problem that the light box would display behind the video instead of on top.

<div class="lightbox">
  <div class="iframeContainer">
    <div class="toolbarLB">
      <span class="closeLB" onclick="lightBoxClose()">x</span>
    </div>
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1346255332069110%26id%3D1345708592123784&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
    allowTransparency="true"></iframe>
  </div>
</div>

It actually took me a while until I figured out that I had to put it behind everything in the code, but also inside of a certain division. After I fixed that I put in the css and checked out the result.

body {
  margin: 0;
  background-color: #EBB;
}
.lightbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5)
}
.toolbarLB {
  text-align: right;
  padding: 3px;
}
.closeLB {
  color: red;
  cursor: pointer;
}
.lightbox .iframeContainer {
  vertical-align: middle;
  background: #CCC;
  padding: 2px;
}
.lightbox.closed {
  display: none;
}

The pop up blocks all the clickable objects so you need to click the window away in order to look at the videos. So now I need to put my “help-window” in there and stylise it a little bit. My idea was to, instead of putting plane text in there, show a little image that explains all the functions. So I made that in photoshop first.

And this is the result, now I will try to implement that into the pop up overlay. After changing the source this is what I am getting:

Now I have to play around with the margin, padding and check If I can make the X disappear without loosing its hit box. So what I did was removing the X on my help screen and making the clickable X “position: absolute;”. Because it now is absolute it doesn’t push my image away. But it now is also not bound to its corner which is why I had to add 400px padding left so it moves back to its top right corner instead of the left one. I also removed all the padding from the images so the grey outline is gone (I left it at the bottom because it gives some kind of 3D effect to it). But the image was still croppped at the bottom and I didn’t really now why. So what I just did was marking at which spot its getting cut off and moving everything in photoshop up so the cropped out part is just not visible.

You might consider this cheating but I think it was a good workaround. May the smart and lazy ones be blessed with power! :D.

So this is my result which I am very happy with:

But than a problem appeared. For some reason the X is not clickable anymore. It shows the pointy mouse curser but clicking doesn’t make anything disappear.
The weird thing is that after changing the position and removing all changes I made, the X still did not have any function.

Okay I really don’t know what to do since this is also extremely frustrating. I have been trying out everything for more than an hour now, also inspecting the element and removing parts of it but nothing works. The thing is it did work in the beginning when I put the code in for the first time, so what I am going to do now is reset everything to the start and then try to figure out what went wrong.

So after rewriting all the code snippets step by step to figure out what caused the not clicking error, I managed to get it working properly but didn’t really found out what the problem was. Since I was really interested and kind of wanted to learn out of my mistake I opened both versions, the working and the old not working one and compared every single line of code.
I noticed that the problem neither came from the html, nor the javascript. But after checking the css code I didn’t find anything either. Then I switched the css codes and it worked. So what I am guessing that I might have put in a small typo at any point which made everything stop working.

Anyways I managed to get it working and this is how it looks:

 

Since this is finally done, I only need my arrow pointing down to show that there is more below the video. Once I had the arrow image I just added img inside my html and put some css to it. I also made the opacity less bright and moved it to the right side of the video. But to completely honest I wasn’t really happy with it. I think now that I have the help screen, people now that there are buttons and they will look for them. So I removed the arrow again.

Since this development step doesn’t have the length of total 8 hours yet, but I am quite satisfied with my website, I got one more idea. I want to implement the ability to press keys on the keyboard as an option. So B stands for banana, R for the Revolver, D for Dildo, G for Gun and Spacebar will play and pause the video.
First of all I obviously had to google key inputs in javascript and got to this link. Here they tell you whichever keycode the key that you are pressing has. Through this I got the following informations:

B = 66
D = 68
R = 82
G = 71
<Spacebar> = 32

Then I read through this page to figure out how to implement the Key Codes. It did deliver a lot of information but it felt more like too much to take in, so I googled a little more and found this on stack overflow.

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.ctrlKey && evt.keyCode == 90) {
        alert("Ctrl-Z");
    }
};

I implemented this into my code and tried it and it worked! When I pressed ctrl + z it showed me the alert. So all I had to do now was putting that into my code and calling out the right functions on key presses. And this is how it looks:

document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 32) {
playPause();
}
if (evt.keyCode == 66) {
Banana();
}
if (evt.keyCode == 68) {
Dildo();
}
if (evt.keyCode == 82) {
Gun();
}
if (evt.keyCode == 71) {
sGenre();
}
};

Now the last thing is to add a small text on the site that shows that you can press you keys as well as the buttons. Or I might put it into the help pop up.

After some time elaborating, I figured that I don’t really want anything else on my website other than the buttons so I decided to put the key shortcuts into the help menu that pops up once you enter the website. But there was one more problem that came into my way and just didn’t want me to finish everything. I changed the code and added my new help pop up image and on the brackets preview it was working fine, but once I uploaded everything to Cyberduck and previewed it in my browser, the margins and changes i made in my code applied, but the image was still the old one even tho I checked that it wasn’t.

I even uploaded the image, and then downloaded it and saw that it was the new one. And then, when I checked it on a friends laptop it worked. So I am just guessing that it might take a while for me, or maybe that it has something to do with my cookies.
So after clearing my cache everything worked perfectly.

Now the last thing I want to add is a little icon in the top browser. And give the tab a name. I googled on how to do it and found this helpful threat on stack overflow. I implemented it on my website using the title and the converted my png image into an .ico image online and connected that as an href.

And this is my final product:

Retrospective:

I am happy.
Very happy and satisfied. All the work I have done till now really payed off and I can now happily show all my friends and also maybe feature bosses the work I have done. And even tho I worked more than 2 months on this there are still points to improve on like a responsive site if people visit it on a phone. But all in all I am relieved that this turned out so well and looking forward to all upcoming future projects.

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 = [
'hehe',
...etc...
];

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 = [
'Western',
'Western',
'Noire',
'Horror',
'Anime',
'Action',
'Bloopers',
'Western'
];

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.

Retrospective:

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!

10.2 – ToDo’s

> ToDo list for this week

Here we are. The last week, and two more Development Steps to come. I am planning to finish up my project and have it completely done by the last development step because I really want to show it on my portfolio. So these are my todos for the last week:

Help/ About screen.
– Having a pop-up window that explains how the website works.

Check out whats the best way to host all my videos.
– Yeah, maybe use Vimeo or youtube or even WordPress to host my videos.

Put my website online to the world wide web.
– Putting my index and style file onto my own server so the website is online.

Visual feedback.
– I need some kind of feedback which shows what video combination is playing

10.1 – Retrospective

RetroSpective Of the last week (Week 9)

This was it. More or less the last week. Thanks to the vacations I managed to get done with the 8th dev step and already started the ninth. I am really happy about all the outcomes and the experience I gathered from this. The whole project evolving technology made me realise how much technology there is and how little we actually now. Which isn’t especially a bad thing, you just need something to focus on and that’s why it was good to choose one or two technologies to stick with for this project. So this is what I managed to do in this week:

I composed everything together.

Therefore I created a background image and a filter to overlay over the video border.

I composed the buttons together with the video to make them fit the scene.

9.3 – D.S. 8 – Composing everything together

Development Step Eight

Composing everything together

I wasn’t really sure how to call this development step but since my plans are to make the website good looking and flawless I thought I would call it composing everything together since I now have to make minor adjustments here and there to make it pleasing to look at.
My first step into that direction would be a background over the whole page, and for that I wanted something “papery” self made since it would fit my box design.

My first step, was finding a good texture. After having that done and saved in my data folder, I could implement it. To do that I just used

background-image: url(data/paper.jpg);

inside of the body. The result was the image covering up the whole background of the website. Now, I am actually going to size the video down a bit because I feel like all of the buttons should be clickable without scrolling. So I put the width of my video to 920p and moved the buttons up so everything is on one site.

But the scroll bar is still accessible even tho it moves the page only by a few pixel. So I googeld on how to remove the scroll bar and found this. Here someone explains that with using

overflow: hidden;

the scrollbar on the used div/ element disappears. The problem is that, if I use that on my div that has all the content inside, the scrollbar still doesn’t disappear.

But looking a little further down on the suggested links by google I found this forum where someone suggested this as a solution:

html {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}

I just put this into my css code and it worked. My scrollbar is now gone. Since I got this out of the way I want to make my background fit the old box design even more so I am going to jump into photoshop and change it up a little bit.

Adding a white bar at the bottom and some “reviews”/icons on the background it lives up the scene already:The only thing that is annoying me now is the fact that the video isn’t really part of the scene. Its more like a square thats just pasted on there, so I want to integrate it more into the image. What I came up with, was putting a filter over it which blurs the edges to make it more fitting to the background, and that looks somewhat like this (in photoshop):

And what I need to do now, is export this as a png, import it and somehow make it perfectly stick on top of my video. But to be honest I have no clue on how to solve this, so I just started googling and found things like this, and this from which I tried both, and actually the second one got me a little closer. What I tried was putting the overlay inside of the videos div and the result was the following:

As You can see, the overlay now is more or less on top of the video, and even scales with it, its just not correctly positioned yet. But that should be fixed quickly. To do that I used

position: absolute;

Which makes the object able to lay on top of the video instead of getting pushed away by it.

left: 1.7%; top: -3.7%; right: 0%;

This was just me trying out until I found the perfect position. And this is what it looks like:

The only problem that this creates, is that the video isn’t clickable anymore to play and pause, since there is an image in front of it. So what I thought is that I can maybe make the image clickable instead. And wow it actually just worked like that. I just had to put the

onClick=”playPause();”

into the <img …> and now the video can be played and paused. Now I only want the mouse curser to be pointing when you hover over it. To do that I first tried putting

cursor: pointer;

into the division that has the image inside, the problem is that the cursor now is pointing over the whole page since the division takes 100% width. So I had to see how to select an object inside of a division. I could just give the img an id or put it into a class but since I already used that method a lot I want to learn how to use the selector. And for that I googled how to select an img inside a div. I found this link, but when I tried out what they suggested,

.overly > img {
cursor: pointer;
}

it didn’t work. But then I noticed that I had a typing error cause my division is called overlay, and then it worked :D.

Now, my masterpiece is almost perfect. The only thing I want to change is the background because I think I should have more icons and make them all smaller so its more of a texture than 4 things that cant be readable if your image is on top. So after photoshopping and putting everything together this is my final product:


Retrospective:

Finally A Development Step which wasn’t depressing like crazy :D. Which doesn’t mean I had no struggles or problems. But I feel like the outcomes from this development step where so significant that it motivated me more then ever. I now have a final and ready to present website. This doesn’t mean it is flawless, not to speak of the responsiveness with mobile devices (which I will look into in another DevStep), but this is definitely the part where I reached my first big goal. Which means that I know have to upload all of this to a server so everyone can access it through my website. And when I am done with that I will look into responsiveness and probably a new way of hosting the videos because WordPress may not be the best way.

9.2 – ToDo’s

> ToDo list for this week

We are getting closer and closer, not only to the end of this project, but also to the final and presentable version of my work. So after I managed to fix my videos I can no jump into one of the last steps which is composing everything together. Therefore I am planning the following to do’s:

Background.
– Adding a fitting and scaling background.

Integrate the videos and buttons into the scene.
I really want my website to look pleasing and to be intuitive. Everything has to neatly fit together and be satisfying to look at.

9.1 – Retrospective

RetroSpective Of the last week (Week 8)

Oooof, Finally through with this development step, is something I could say since this was probably the most stressing development step by far. But actually, as much as it demotivated me in the process, as much it now motivates me to keep going and getting better since I (hopefully) learned out of my mistakes.
The interesting thing for me personally now is to see which problems are still in front of me because I am supposed to do 10 development steps and so far i only have plans for one more development step, but I guess we will see how it goes and what problems I will encounter. So here what I did in the last week:

I started using my final clips by hosting them through wordpress.

I figured out how to have a pleasing looking video design.

I changed the buttons and video position relatively to each other.

The video now is clickable which makes it toggle between play and pause.

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.