Added yt videos

diff --git a/assets/slides.js b/assets/slides.js
index 37111e0d21fe1a8558d90f8d516a27d857d896dc..af099a339de8409c2a2ff5190cbfa5b3cd5d5d99 100644 (file)
--- a/assets/slides.js
+++ b/assets/slides.js
@@ -22,7 +22,7 @@ function setupSlideshows () {
                // ----- agregating end
 
                const slides = Array.from(slideshow.children)                                                   // Array of all slides
-                       .filter((child) => child.tagName == ["IMG"]);
+                       .filter((child) => child.tagName == "IMG" || child.tagName == "IFRAME");
 
                for (slide of slides) {
                        slide.id = `show${s}slide${slide.dataset.order}`;                                       // order slides by given indexes
@@ -109,7 +109,7 @@ function setupSlideshows () {
                }
 
                /* image and button layout */
-               .slideshow > img {
+               .slideshow > img, .slideshow > iframe {
                        grid-column-start: 1; grid-row-start: 1;
                        display: none;
                        width: 100%; height: 100%; object-fit: contain;
@@ -132,6 +132,8 @@ function setupSlideshows () {
                        user-select: none;
                        -webkit-user-select: none;
                }
+               iframe.currentSlide ~ div { pointer-events: none; }
+               iframe.currentSlide ~ div > div:not(:nth-child(2)) { pointer-events: auto; }
                .slideshow > div > div:hover { opacity: 1; }
                .slideshow > div > div:first-child {
                        background: linear-gradient(0.25turn, rgba(225,255,255,.2), rgba(225,255,255,0));

diff --git a/assets/style.css b/assets/style.css
index 6be5817721ca5818bedde1ad8c4b5217b1a63c0e..440878b64dccba435c04d7549004fbe2c5a23243 100644 (file)
--- a/assets/style.css
+++ b/assets/style.css
@@ -66,7 +66,7 @@ aside {
 iframe {
        width: 100%;
        aspect-ratio: 1.41;
-       border: 1px solid var(--mediumgray);
+       border: none;
 }
 
 .blockquoteImage { margin: 40px 0 40px 0; width: 113%; }

diff --git a/templates/pages/personal/cotton-town.html b/templates/pages/personal/cotton-town.html
index 0b268529e92292089f2c91d7df0f9ea1e543c1fc..ffc6d5349f9fcafe66b9bfa291f7926c9d8f50ea 100644 (file)
--- a/templates/pages/personal/cotton-town.html
+++ b/templates/pages/personal/cotton-town.html
@@ -13,7 +13,7 @@
                        </p>
                </nav>
                <main>
-                       <div class="slideshow filling">
+                       <div class="slideshow filling noEnhance">
                                <img data-order="0" src="/media/progressive/cotton-town1.jpg" />
                                <img data-order="1" src="/media/progressive/cotton-town2.jpg" />
                                <img data-order="2" src="/media/progressive/cotton-town3.jpg" />
@@ -22,6 +22,7 @@
                                <img data-order="5" src="/media/progressive/cotton-town6.jpg" />
                                <img data-order="6" src="/media/progressive/cotton-town7.jpg" />
                                <img data-order="7" src="/media/progressive/cotton-town8.jpg" />
+                               <iframe src="https://www.youtube-nocookie.com/embed/o4QyEv-asSw?si=Y-hDjLGZdrolMUcA&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
                        </div>
                </main>
                {% include 'footer.html' %}

diff --git a/templates/pages/personal/riders.html b/templates/pages/personal/riders.html
index cd63fc03e116ad44c1aa81e542145cfd315d0a23..59fada5007206bf69f32bdd34dbaf283f594f3cb 100644 (file)
--- a/templates/pages/personal/riders.html
+++ b/templates/pages/personal/riders.html
@@ -225,6 +225,8 @@
        Political and economic destabilisation, climate change and war have created tens of millions of migrants in the past few years alone. Some of those people come to our country only to find themselves in a situation that is hardly, if at all, an improvement on what they left behind. They find themselves taken advantage of by the same group of people that caused the wars, the climate disasters and the widespread instability to begin with. And on top of that, they face abuse and ignorance from the rest of us. To many people, the Riders don't exist until they're stood on the doorstep. Scholars have written about how the platform economy's demand for homogenous, mind-numbingly repetitive tasks has led to the creation of an interchangeable and invisible workforce, benefitting companies but only isolating and damaging Riders further<sup><a id="umer2021b" href="#umer2021">[5]</a></sup>. The aim of this project is to counteract this effect; to bring Riders into the forefront as individuals, representing them positively and on their own terms. The following ten portraits are of people who were kind enough to help me with this project. I learnt a lot from them, and some were happy for me to record some of what they told me in this book. Hopefully these images convey something about the Riders that you might not have seen elsewhere.
 </p>
 
+<iframe src="https://www.youtube-nocookie.com/embed/o4QyEv-asSw?si=MhA4ne_GIMYNVnvR&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
 <iframe id="book" src="/media/book.pdf"></iframe>
 
 <h3>References</h3>