https://fabianfeichter.com Fabian Feichter Mon, 09 Jan 2023 11:14:59 +0000 https://fabianfeichter.com en https://fabianfeichter.com/HOME Mon, 09 Jan 2023 11:14:59 +0000 Fabian Feichter https://fabianfeichter.com/HOME body { background-color: #f2ff26; } video { width: 100vw; height: 100vh; object-fit: cover; position: fixed; top: 0; left: 0; z-index: -1; } #home-button { position: fixed; top: 50%; left: 2%; font-family: Lucida Sans Unicode; font-size: 4vh; display: inline-block; padding: .5vh .5vh 0vh .8vh; background-color: #ffcfc4; border-radius: 0px; cursor: pointer; z-index: 2; } #home-button:hover { box-shadow: inset 2000px 0 0 0 #f2ff26; padding: .5vh .5vh 0vh .8vh; transition: color .9s ease-in-out, box-shadow .9s ease-in-out; border-radius: 0px; z-index: 2; } #enter-site-button { position: fixed; top: 50%; right: 2%; font-family: Lucida Sans Unicode; font-size: 4vh; display: inline-block; padding: .5vh .5vh 0vh .8vh; background-color: #ffcfc4; border-radius: 0px; cursor: pointer; z-index: 2; } #enter-site-button:hover { box-shadow: inset 2000px 0 0 0 #f2ff26; padding: .5vh .5vh 0vh .8vh; transition: color .9s ease-in-out, box-shadow .9s ease-in-out; border-radius: 0px; z-index: 2; } <img src="https://freight.cargo.site/t/original/i/94545ea5cf6946633e4317b91a95e169d2135b22f9582b3a1cee8e8ec22f63e9/auge.png" style="width: 5vh; height: auto; margin: .8vh 0vh 0vh 0vh;"> <img src="https://freight.cargo.site/t/original/i/809a8eddbff26fbe0a5aff740e4a08af7145fa15e9ce7416b928623f8cb39271/hirn.png" style="width: 5vh; height: auto; margin: .8vh .8vh 0vh 0vh;"> /** * start when the browser has finished parsing but is still loading sub-resources (like videos) * not needed in JSFiddle as you can choose it in the options (onDomready) * * document.onreadystatechange = function () { * if (document.readyState == "interactive") { **/ // build up your storage for video urls here // leave out the file extension, we will let the browser decide which type he can play. // also note how I left out the 'http:' part. we don't need it, the browser automatically // decides if he needs http or https. var videoStorage = [ '//files.cargocollective.com/c1558897/imwald', '//files.cargocollective.com/c1558897/schlacht', '//files.cargocollective.com/c1558897/pe', '//files.cargocollective.com/c1558897/ombelico', '//files.cargocollective.com/c1558897/mouvimento', '//files.cargocollective.com/c1558897/kronplatz', '//files.cargocollective.com/c1558897/imwalda', '//files.cargocollective.com/c1558897/gamba', '//files.cargocollective.com/c1558897/dita', '//files.cargocollective.com/c1558897/casal', '//files.cargocollective.com/c1558897/beachboy', '//files.cargocollective.com/c1558897/auto', '//files.cargocollective.com/c1558897/aria', '//files.cargocollective.com/c1558897/absolut' ], video = document.querySelector('video'), // choose one random url from our storage as the active video activeVideoUrl = videoStorage[Math.round(Math.random() * (videoStorage.length - 1))]; // check which file extension your browser can play and set the video source accordingly if(video.canPlayType('video/mp4')) { video.setAttribute('src', activeVideoUrl + '.mp4'); } /*} }*/ function refreshPage(){ window.location.reload(); }