search

17dbouchier / 2.4-Assessment

https://17dbouchier.github.io/2.4-Assessment/
1 stars 0 forks source link

Centre of landing page video needs to remain visible when browser window is adjusted. #2

Closed 17dbouchier closed 4 years ago

17dbouchier commented 4 years ago

11/05

Summary of issue

When the window of the landing page is adjusted and resized, the positioning of the video does not adjust to consistently keep the centre of the video visible. Rather, it only shows the left or right sides of the video. This issue is present on desktop, however, as of writing this, there has been no testing to find whether this issue is present on other devices.

Code & Possible Solutions

This issue could be solved through an adjustment to the flex code within the CSS container for the landing page: .showcase { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-size: cover; background-position: center; flex-direction: column; }

This issue may also be resolved partially by looking through the media queries, as they may be preventing the video from adjusting alignment in order to keep the centre visible: @media screen and (max-aspect-ratio: 1920/1080) { .video-container > video { height: 100%; } } @media screen and (min-aspect-ratio: 1920/1080) { .video-container > video { width: 100%; } }

17dbouchier commented 4 years ago

25/05

Enhancement added

As of writing this comment, this bug has been fixed. This was a long process of attempting different code, and I eventually ended up refining my @media code: @media (min-aspect-ratio: 16/9) { .video-container video { width: 100%; height: auto; } } @media (max-aspect-ratio: 16/9) { .video-container video { width: auto; height: 100%; } }

The main difference between the present code and the previous code is using an aspect ratio rather than a screen resolution for the media queries. This ensures that the centre of the video always remains at the centre of the screen, and fills the entire screen consistently with no overflow, no matter the resolution of the user's screen.

An additional benefit of the inclusion of this code is that it works with any video. This means that if I were to change the video at some point throughout this project, the aesthetic will not be affected (however this has yet to be tested).

Improvements to be made

When the browser window is adjusted, there is considerable lag which may agitate the user. This may be due to the size of the video file, however this would require some testing in order to confirm.