From 1bf823acbc85b72d81bdd6bf79cef3c68f0b14f4 Mon Sep 17 00:00:00 2001
From: Alina Marquardt <lastfuture@lastfuture.de>
Date: Wed, 21 May 2025 15:35:59 +0200
Subject: [PATCH] iframe scaling improvements for mobile
---
public_html/portfolio.html | 2 +-
public_html/style.css | 3 +++
2 files changed, 4 insertions(+), 1 deletion(-)
diff --git a/public_html/portfolio.html b/public_html/portfolio.html
index f4bc566..e36a02e 100644
--- a/public_html/portfolio.html
+++ b/public_html/portfolio.html
@@ -61,7 +61,7 @@
<p>between 2013 and 2020 I've created <a href="https://git.broken.graphics/explore/repos?q=watchface" target="_blank">serveral watchfaces</a> for all pebble smartwatch models as well as fitbit smartwatches.</p>
<p>these watchfaces have been designed with usability concepts in mind respecting interaction capabilities and screen space constraints. that includes motion gestures, adaptive display of stats based on activity and deep configurability via the user's smartphone.</p>
<iframe class="watchface-video" width="445" height="445" src="https://www.youtube.com/embed/_vG2ZFeQobg?si=Ys78wYEozPAy3eoC" 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 width="445" height="445" src="https://www.youtube.com/embed/EjgYxUxGvdI?si=eBT5P9vRsDyyNALU" 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 class="watchface-video" width="445" height="445" src="https://www.youtube.com/embed/EjgYxUxGvdI?si=eBT5P9vRsDyyNALU" 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>
</article>
<article id="yana">
<h2><span class="halfbubble blurgreen"></span><em>yana</em> UX/UI and graphic design</h2>
diff --git a/public_html/style.css b/public_html/style.css
index baf785f..c92e844 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -783,6 +783,9 @@ div.opaque h2 span.halfbubble {
}
.watchface-video {
margin: 0.6rem 0;
+ width: 100%;
+ height: auto;
+ aspect-ratio: 1/1;
}
/* music */