6.3 – D.S. 5 – Getting Started with CSS

Development Step FIVE

Getting started with CSS

Like I mentioned previously, I am not really affine with css so I will start this off by just googling for the possibilities and functionalities of css.

After googling for “css functionalities” and clicking on the first two links I noticed that there are also special css functions (w3schools.com, quackit.com) and that the functions are only a small part of css:

So I googled “videos in css” to get something more specific for me and again went on w3schools, and checked out the three examples on the Responsive Web Design Video section.

The first example was using width 100% which basically resulted in the video always scaling with the window of the browser.
The second example did something similar but it only scaled when the browser width was smaller than 400px (maximum video size). It accomplished this by setting the “max-width” to 100% which might be something that I want to use since I don’t want my video to scale bigger than it is since it would loose quality.
The third and last example was, again working with the 100% width expression but it added more objects which made everything scale together depending on the size of the window.

Before trying this out, I also went ahead and looked for different things for my buttons. So I figured the first thing I should do is go on w3schools and check the css button functions to get a good overview of what would be doable. After reading through the features I just implemented some on my project to try them out in live action.

.myvideo{
width: 640px;
height: 480px;
}

.button {
background-color: #555555;
border: none;
border-radius: 6px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}

.button:hover {
background-color: #ffffff;
color: black;
border: 2px solid #555555;
}

The results where stunning 😀

But since I just learned that the video itself doesn’t really have any cool possibilities for layouts etc. I want to emphasise the buttons a lot more. This is why I googled “cool buttons css” and the first link I found was this one.

Looking through the buttons, these two were the most interesting and fitting to my layout: “Jelly Button by ayamflow”, “Particle Button by Timo Hausmann”. But I wasn’t really satisfied so I tried out another link. And here I found one interesting design. Still not being happy, I searched the web even further and checked this and this. And found these two more button effects (1, 2). That makes my following plan the following:

I want to have this button as the main Genre switching button and the next genre will also be displayed on the button (GIF).
This wiggle effect might help to call to action and put more importance on the genre button (GIF).

And for the three objects I planned using images with this effect on the buttons which should make it way more playful.

Sadly, after copying the code into my existing code and also linking the used stylesheet, the “Jelly Button” didn’t work out at all. my result is basically just a deformed button since it somehow can’t link itself to the stylesheet or read jQuery.

So instead of trying to fix it I moved on because it’s not really worth spending my time on this feature. What I did instead was implementing the wiggle script from Lewitje and it worked out perfectly since he didn’t use any external sources. I implemented the wiggling, changed the speed at which it plays and customised the button so it fits the rest (for now). I also placed it below the video as the main button. And while I was at positioning I changed the video look to max-width 100% so it scales with the website to its max resolution and the button scaling with it – always staying centered.

And this is my result:

As we can see in the video, the buttons are still functioning, the genre button wiggles every 4 seconds, and when I scale the window the genre button and the video scales with it.

But we can also notice a small “bug” which happens when we change the genre/video. When the video is changed you can see the background for a second and the button moves up since the video object disappears for a split second. It is indeed only a small thing but I personally don’t like it and will try to fix it now.
Luckily I more or less know already what the problem is so my solution would be to put some kind of filler object in the size of the video behind it so when we switch the video the button stays in its position. And if I use like a black box then it wont flash up white.

Since google is my best friend I just quickly googled the problem that I have to see if someone else maybe got it fixed and this is what i googled “video flashes when changing html js”. The first link with the headline “Html video tag blinking when Setting new source? [duplicate]” looked promising and it referred me to the solved question “HTML5 Play movie from multiple parts without flashing screen“.
The way it was solved by preloading all the videos and having a black box as the background. So I looked at the solution and tried implementing it into my code. The problem that I encountered was that the guy with the solution had another approach at switching the videos because he only had two videos and hid one of them which makes it easy for him to preload the two videos. Nonetheless did I add “preload=”auto”” to my video and put “background: black;” into my css – video class. But this brought me to another problem. As we can see in this video, my video now has a black background which you can see for a split second when I change videos, but it doesn’t cover the whole background and doesn’t scale with the video.

And again I started googling. But this time I wasn’t as successful. To make it short, I googled “css scaling video background” and found two decent looking links, one of them putting the video as a background video in a division (tried it out and it would have either made the whole page black or nothing), and the other link using “min-width: 100%;” which actually made my video background to be almost 100% of the video. I actually tried out many different things, like putting my video in a div, changing all kind of attributes from that div, changing the attributes of the video, and so on but sadly I couldn’t get to any better solution than this for now.
Note: I also removed the controls to make it a little less flashy since they are useless anyways.

Retrospective:

So far it looks very pleasing and I am satisfied with the Genre button and the scaling video width. I am not fully happy with the switching “animation” and the flashing but I do think that the progress I made and the solution I have for now are perfectly fine. I do still want to do something about this in the future but I think it will be something that comes with time and shouldn’t be focused down completely. Although this development step was more than 8 hours of work it was more than fine since the last dev. step was a little less.