Only embed youtube when the user hits play

public/style.css

@@ -7501,6 +7501,14 @@ video {
 .breadcrumb.current {
   text-overflow: clip ellipsis;
 }
+.aspect-ratio-real--1x1 {
+  aspect-ratio: 1 / 1;
+}
+.center-abs {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 @media screen and (min-width: 35em) {
   .bg1-ns {
     background-color: var(--c1);
@@ -8896,9 +8904,8 @@ code .ss,
   max-height: 60vh;
 }
 .timeline-item .timeline-media.timeline-embed {
-  height: 0;
   position: relative;
-  padding-bottom: 56.25%;
+  aspect-ratio: 16 / 9;
 }
 .timeline-item .timeline-media.timeline-embed > iframe {
   position: absolute;

src/rawdata/css/core.css

@@ -363,6 +363,17 @@ on our SVGs to ensure that they naturally render at the right size.)
     }
 }
 
+/* NOTE(asaf): Tachyons uses a padding trick instead of using the actual property */
+.aspect-ratio-real--1x1 {
+	aspect-ratio: 1 / 1;
+}
+
+.center-abs {
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
 @media screen and (min-width: 35em) {
     .bg1-ns {
         background-color: var(--c1);

src/rawdata/css/timeline.css

@@ -33,13 +33,10 @@
         max-height: 60vh;
 
         &.timeline-embed {
-            /* aspect-ratio aspect-ratio--16x9 */
-            height: 0;
             position: relative;
-            padding-bottom: 56.25%;
+			aspect-ratio: 16 / 9;
 
             >iframe {
-                /* aspect-ratio--object */
                 position: absolute;
                 top: 0;
                 right: 0;

src/templates/img/play.svg

@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-40 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>

src/templates/src/include/timeline_item.html

@@ -70,7 +70,19 @@
 			{{ else if eq .Type mediaaudio }}
 				<audio src="{{ .AssetUrl }}" controls>
 			{{ else if eq .Type mediaembed }}
-				{{ .EmbedHTML }}
+				{{ if .ThumbnailUrl }}
+					<div class="relative" onclick="this.insertAdjacentElement('beforebegin', this.parentElement.querySelector('template').content.cloneNode(true).firstElementChild); this.remove();">
+						<img src="{{ .ThumbnailUrl }}"  />
+						<div class="overflow-hidden absolute center-abs c2 br-100 bg-transparent pointer aspect-ratio-real--1x1 pa3 flex justify-center items-center">
+							<div class="svgicon-lite w2 flex items-center pa1">
+								{{ svg "play" }}
+							</div>
+						</div>
+					</div>
+					<template>{{ .EmbedHTML }}</template>
+				{{ else }}
+					{{ .EmbedHTML }}
+				{{ end }}
 			{{ else }}
 				<div class="project-card pv1 ph2">
 					<a href="{{ .AssetUrl }}" target="_blank">{{ .Filename }} ({{ filesize .FileSize }})</a>

src/website/timeline_helper.go

@@ -366,13 +366,14 @@ func youtubeMediaItem(videoId string) templates.TimelineItemMedia {
 	return templates.TimelineItemMedia{
 		Type: templates.TimelineItemMediaTypeEmbed,
 		EmbedHTML: template.HTML(fmt.Sprintf(
-			`<iframe src="https://www.youtube-nocookie.com/embed/%s" allow="accelerometer; encrypted-media; gyroscope;" allowfullscreen frameborder="0"></iframe>`,
+			`<iframe src="https://www.youtube-nocookie.com/embed/%s?autoplay=1" allow="autoplay; accelerometer; encrypted-media; gyroscope;" allowfullscreen frameborder="0"></iframe>`,
 			template.HTMLEscapeString(videoId),
 		)),
 		ExtraOpenGraphItems: []templates.OpenGraphItem{
 			{Property: "og:video", Value: fmt.Sprintf("https://youtube.com/watch?v=%s", videoId)},
 			{Name: "twitter:card", Value: "player"},
 		},
+		ThumbnailUrl: fmt.Sprintf("https://i.ytimg.com/vi/%s/hq720.jpg", videoId),
 	}
 }