Why YouTube?
I came up with this idea when I saw a similar site, but in the style of Spotify. It immediately caught my attention and I thought it was a great idea to stand out. Then I thought making it like YouTube would be an even better idea. It would allow me to showcase my projects in a interesting way. To best reflect original layout, I used a couple of elements taht I wan to talk about..
Top bar and side bar
They are navs with fixed position, that I included in all layouts by using CMS templates, so I avoid repetitions. After button click, the content shrinks to the point where only icons are visible. This functionality is made possible by js onClick() event.
Grid of videos
Main content contains videos displayed in a grid, that adjust size to the screen resolution. Each video item has fixed aspect ratio. To achieve this I did not assign height, insted I used padding-top at 100%. Since padding-top value is based on width of an element, the result is perfect square. Same trick was used to archeive 16:9 aspect ratio on thumbnails.
Thumbnail animation
Thumbnails are four same-sized images with the same position. When user hovers over the video, each image is changing its display to none with different time delays. The result is animation of a slide show.
More Info
Github: https://github.com/MikolajGladysz/adminPanel
View website: Link