Only embed youtube when the user hits play
This commit is contained in:
parent
4b26a92018
commit
27deef56af
|
@ -7501,6 +7501,14 @@ video {
|
||||||
.breadcrumb.current {
|
.breadcrumb.current {
|
||||||
text-overflow: clip ellipsis;
|
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) {
|
@media screen and (min-width: 35em) {
|
||||||
.bg1-ns {
|
.bg1-ns {
|
||||||
background-color: var(--c1);
|
background-color: var(--c1);
|
||||||
|
@ -8896,9 +8904,8 @@ code .ss,
|
||||||
max-height: 60vh;
|
max-height: 60vh;
|
||||||
}
|
}
|
||||||
.timeline-item .timeline-media.timeline-embed {
|
.timeline-item .timeline-media.timeline-embed {
|
||||||
height: 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 56.25%;
|
aspect-ratio: 16 / 9;
|
||||||
}
|
}
|
||||||
.timeline-item .timeline-media.timeline-embed > iframe {
|
.timeline-item .timeline-media.timeline-embed > iframe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -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) {
|
@media screen and (min-width: 35em) {
|
||||||
.bg1-ns {
|
.bg1-ns {
|
||||||
background-color: var(--c1);
|
background-color: var(--c1);
|
||||||
|
|
|
@ -33,13 +33,10 @@
|
||||||
max-height: 60vh;
|
max-height: 60vh;
|
||||||
|
|
||||||
&.timeline-embed {
|
&.timeline-embed {
|
||||||
/* aspect-ratio aspect-ratio--16x9 */
|
|
||||||
height: 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 56.25%;
|
aspect-ratio: 16 / 9;
|
||||||
|
|
||||||
>iframe {
|
>iframe {
|
||||||
/* aspect-ratio--object */
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 259 B |
|
@ -70,7 +70,19 @@
|
||||||
{{ else if eq .Type mediaaudio }}
|
{{ else if eq .Type mediaaudio }}
|
||||||
<audio src="{{ .AssetUrl }}" controls>
|
<audio src="{{ .AssetUrl }}" controls>
|
||||||
{{ else if eq .Type mediaembed }}
|
{{ else if eq .Type mediaembed }}
|
||||||
|
{{ 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 }}
|
{{ .EmbedHTML }}
|
||||||
|
{{ end }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
<div class="project-card pv1 ph2">
|
<div class="project-card pv1 ph2">
|
||||||
<a href="{{ .AssetUrl }}" target="_blank">{{ .Filename }} ({{ filesize .FileSize }})</a>
|
<a href="{{ .AssetUrl }}" target="_blank">{{ .Filename }} ({{ filesize .FileSize }})</a>
|
||||||
|
|
|
@ -366,13 +366,14 @@ func youtubeMediaItem(videoId string) templates.TimelineItemMedia {
|
||||||
return templates.TimelineItemMedia{
|
return templates.TimelineItemMedia{
|
||||||
Type: templates.TimelineItemMediaTypeEmbed,
|
Type: templates.TimelineItemMediaTypeEmbed,
|
||||||
EmbedHTML: template.HTML(fmt.Sprintf(
|
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),
|
template.HTMLEscapeString(videoId),
|
||||||
)),
|
)),
|
||||||
ExtraOpenGraphItems: []templates.OpenGraphItem{
|
ExtraOpenGraphItems: []templates.OpenGraphItem{
|
||||||
{Property: "og:video", Value: fmt.Sprintf("https://youtube.com/watch?v=%s", videoId)},
|
{Property: "og:video", Value: fmt.Sprintf("https://youtube.com/watch?v=%s", videoId)},
|
||||||
{Name: "twitter:card", Value: "player"},
|
{Name: "twitter:card", Value: "player"},
|
||||||
},
|
},
|
||||||
|
ThumbnailUrl: fmt.Sprintf("https://i.ytimg.com/vi/%s/hq720.jpg", videoId),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue