Dziś mniej dywagacji, a trochę konkretów. Czyli jak dynamicznie dostosować w HTML rozmiar video do szerokości i wysokości ekranu.
W listopadzie pracowałam nad stroną rener.in i moim głównym zadaniem było poprawne wyświetlenie filmu – video miało zajmować cały ekran i dynamicznie dostosowywać się do zmiany szerokości ekranu (tzw. resize event). Nigdy wcześniej nie pracowałam z video w HTML-u, ale gdy zgłosili się do mnie sympatyczni panowie z Rener i przedstawili swoje oczekiwania, nie mogłam odmówić i nie skorzystać z wyzwania. Wzięłam się więc ochoczo do pracy.
W ruch poszedł Stack Overflow – jedno z moich ulubionych miejsc w sieci. Jak zgrabnie dostosować to video? (I jak je w ogóle wyświetlić???) Pomysłów było sporo, ale żaden mi nie odpowiadał. Jestem zwolenniczką prostych rozwiązań, a do tego perfekcjonistką, więc żaden zawiły lub prawie działający kod nie miał u mnie szans. Pozostała kartka papieru i długopis i powstało moje autorskie rozwiązanie. Działa tylko, jeśli znane są proporcje filmu – u mnie było to 16:9.
Najsampierw umieszczamy znacznik <video>
w kodzie strony:
<video id="video" playsinline muted onplaying="this.controls=false" autoplay loop> <source id="mp4" src="" type="video/mp4"> <source id="webm" src="" type="video/webm"> </video>
src
dla <source>
ustawiamy dynamicznie w JavaScript w zależności od szerokości ekranu.
I do dzieła!
window.addEventListener('resize', resize, false); function resize() { if (window.innerWidth != previous_width) { previous_width = window.innerWidth; var video = document.getElementById('video'); if (video) { var delta = 20; var window_width = window.innerWidth; var window_height = window.innerHeight; var width = window_width + delta; var height = width * 9 / 16; if (height < window_height) { height = window_height + delta; width = height * 16 / 9; } video.width = width; video.height = height; } } }
gdzie previous_width
jest ustawione na 0 przy załadowaniu strony (onLoad()
), a delta
to nasz bufor bezpieczeństwa, w razie gdyby dzielenie nie było całkowite.
Co tu się dzieje? Najpierw zakładamy, że szerokość ekranu jest większa niż jego wysokość i na jej podstawie obliczamy wysokość video (* 9 / 16
). Potem sprawdzamy, czy wyliczona wysokość jest mniejsza niż wysokość ekranu. Jeśli tak, przyjmujemy wysokość ekranu za wysokość video i na jej podstawie obliczamy szerokość.
Myślę, że jest to dość eleganckie i proste rozwiązanie, a do tego przetestowane w BrowserStack.