fallback to still image on mobile
commitdf09da4580a75eee4dd2f2787da915c40781eef0
authorMatilde Park <matilde@tlon.io>
dateTue 15 Oct 2019, 13:13 (7 years ago)
parent8fc505f
static/scripts.js+10−1
@@ -388,4 +388,13 @@ window.addEventListener("scroll", event => {
388388 link.classList.remove("current");
389389 }
390390 });
391−})};
391+})};
392+
393+let oceanvid = document.getElementById("ocean");
394+
395+if ((oceanvid !== null) && (window.innerWidth > window.innerHeight)) {
396+ oceanvid.innerHTML = `<source
397+ src="https://storage.googleapis.com/media.urbit.org/site/sea30-1440.mp4"
398+ type="video/mp4"/>
399+ Your browser does not support the video tag.`
400+}
templates/index.html+2−7
@@ -13,16 +13,11 @@
1313<section class="full p0 vid-insert-wrap full-bleed">
1414 <video
1515 class="vid-insert bg-black"
16+ id="ocean"
1617 autoplay
1718 muted
1819 loop
19− <!-- NB:Gavin: Removed playsinline for the sake of mobile users. -->
20− <!-- playsinline -->
21− poster="https://storage.cloud.google.com/media.urbit.org/site/sea30-poster.png">
22− <source
23− src="https://storage.googleapis.com/media.urbit.org/site/sea30-1440.mp4"
24− type="video/mp4"/>
25− Your browser does not support the video tag.
20+ poster="https://media.urbit.org/site/sea30-poster.png">
2621 </video>
2722
2823 <div class="grid12" style="height: 100%; width:100%;">