Add YouTube shortcode simple mode

Adapted from the work of @onedrawingperday. See gohugoio#4616
bep · May 21, 2018 · b92a0a1 · b92a0a1
1 parent 2f17f93
commit b92a0a1
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 19 deletions.
diff --git a/config/privacy/privacyConfig.go b/config/privacy/privacyConfig.go
@@ -76,8 +76,13 @@ type YouTube struct {
 
 	// When you turn on privacy-enhanced mode,
 	// YouTube won’t store information about visitors on your website
-	// unless they play the video.
+	// unless the user plays the embedded video.
 	PrivacyEnhanced bool
+
+	// If simple mode is enabled, only a thumbnail is fetched from ytimg.com and
+	// shown with a play button overlaid. If a user clicks the button, he/she will
+	// be taken to the video page on youtube.com in a new browser tab.
+	Simple bool
 }
 
 func DecodeConfig(cfg config.Provider) (pc Config, err error) {

diff --git a/tpl/tplimpl/embedded/templates.autogen.go b/tpl/tplimpl/embedded/templates.autogen.go
@@ -287,17 +287,54 @@ if (!doNotTrack) {
 {{- end -}}`},
 	{`shortcodes/youtube.html`, `{{- $pc := .Page.Site.PrivacyConfig.YouTube -}}
 {{- if not $pc.Disable -}}
-{{ $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" }}
-{{ if .IsNamedParams }}
-<div {{ if .Get "class" }}class="{{ .Get "class" }}"{{ else }}style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"{{ end }}>
-  <iframe src="//{{ $ytHost }}/embed/{{ .Get "id" }}?{{ with .Get "autoplay" }}{{ if eq . "true" }}autoplay=1{{ end }}{{ end }}"
-  {{ if not (.Get "class") }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0" title="YouTube Video"></iframe>
-</div>{{ else }}
-<div {{ if len .Params | eq 2 }}class="{{ .Get 1 }}"{{ else }}style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"{{ end }}>
-  <iframe src="//{{ $ytHost }}/embed/{{ .Get 0 }}" {{ if len .Params | eq 1 }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0" title="YouTube Video"></iframe>
- </div>
+{{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
+{{- if $pc.Simple -}}
+{{ template "_internal/shortcodes/youtube_simple.html" . }}
+{{- else -}}
+{{- $id := .Get "id" | default (.Get 0) -}}
+{{- $class := .Get "class" | default (.Get 1) }}
+<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"{{ end }}>
+  <iframe src="//{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0" title="YouTube Video"></iframe>
+</div>
 {{ end }}
 {{- end -}}`},
+	{`shortcodes/youtube_simple.html`, `{{ $id := .Get "id" | default (.Get 0) }}
+{{ $class := .Get "class" | default (.Get 1) }}
+{{ $hasClass := $class }}
+{{ $class := $class | default "_h_youtube" }}
+{{ if not $hasClass }}
+{{/* If class is set, assume the user wants to provide his own styles. */}}
+<style>
+._h_youtube {
+   position: relative;padding-bottom: 56.23%;height: 0;
+   overflow: hidden;
+   max-width: 100%;
+   background: #000;
+   margin: 5px;
+}
+._h_youtube img {
+   min-width:100%;
+   height:auto;
+   color: #000;
+}
+
+._h_youtube .play {
+   height: 72px;
+   width: 72px;
+   left: 50%;
+   top: 50%;
+   margin-left: -36px;
+   margin-top: -36px;
+   position: absolute;
+   cursor: pointer;
+}
+</style>
+{{ end }}
+<div class="{{ $class }}">
+{{ $tb := printf "https://i.ytimg.com/vi/%s/" $id }}
+<a href="https://youtube.com/watch?v={{ $id | safeHTMLAttr }}" target="_blank">
+     <img src="{{ printf "%smaxresdefault.jpg" $tb }}" srcset="{{ printf "%shqdefault.jpg" $tb }} 1x {{ printf "%smaxresdefault.jpg" $tb }} 2x" alt="Video">
+<div class="play"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></div></a></div>`},
 	{`twitter_cards.html`, `{{- with $.Params.images -}}
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:image" content="{{ index . 0 | absURL }}"/>

diff --git a/tpl/tplimpl/embedded/templates/shortcodes/youtube.html b/tpl/tplimpl/embedded/templates/shortcodes/youtube.html
@@ -1,13 +1,13 @@
 {{- $pc := .Page.Site.PrivacyConfig.YouTube -}}
 {{- if not $pc.Disable -}}
-{{ $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" }}
-{{ if .IsNamedParams }}
-<div {{ if .Get "class" }}class="{{ .Get "class" }}"{{ else }}style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"{{ end }}>
-  <iframe src="//{{ $ytHost }}/embed/{{ .Get "id" }}?{{ with .Get "autoplay" }}{{ if eq . "true" }}autoplay=1{{ end }}{{ end }}"
-  {{ if not (.Get "class") }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0" title="YouTube Video"></iframe>
-</div>{{ else }}
-<div {{ if len .Params | eq 2 }}class="{{ .Get 1 }}"{{ else }}style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"{{ end }}>
-  <iframe src="//{{ $ytHost }}/embed/{{ .Get 0 }}" {{ if len .Params | eq 1 }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0" title="YouTube Video"></iframe>
- </div>
+{{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
+{{- if $pc.Simple -}}
+{{ template "_internal/shortcodes/youtube_simple.html" . }}
+{{- else -}}
+{{- $id := .Get "id" | default (.Get 0) -}}
+{{- $class := .Get "class" | default (.Get 1) }}
+<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"{{ end }}>
+  <iframe src="//{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0" title="YouTube Video"></iframe>
+</div>
 {{ end }}
 {{- end -}}
diff --git a/tpl/tplimpl/embedded/templates/shortcodes/youtube_simple.html b/tpl/tplimpl/embedded/templates/shortcodes/youtube_simple.html
@@ -0,0 +1,37 @@
+{{ $id := .Get "id" | default (.Get 0) }}
+{{ $class := .Get "class" | default (.Get 1) }}
+{{ $hasClass := $class }}
+{{ $class := $class | default "_h_youtube" }}
+{{ if not $hasClass }}
+{{/* If class is set, assume the user wants to provide his own styles. */}}
+<style>
+._h_youtube {
+   position: relative;padding-bottom: 56.23%;height: 0;
+   overflow: hidden;
+   max-width: 100%;
+   background: #000;
+   margin: 5px;
+}
+._h_youtube img {
+   min-width:100%;
+   height:auto;
+   color: #000;
+}
+
+._h_youtube .play {
+   height: 72px;
+   width: 72px;
+   left: 50%;
+   top: 50%;
+   margin-left: -36px;
+   margin-top: -36px;
+   position: absolute;
+   cursor: pointer;
+}
+</style>
+{{ end }}
+<div class="{{ $class }}">
+{{ $tb := printf "https://i.ytimg.com/vi/%s/" $id }}
+<a href="https://youtube.com/watch?v={{ $id | safeHTMLAttr }}" target="_blank">
+     <img src="{{ printf "%smaxresdefault.jpg" $tb }}" srcset="{{ printf "%shqdefault.jpg" $tb }} 1x {{ printf "%smaxresdefault.jpg" $tb }} 2x" alt="Video">
+<div class="play"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></div></a></div>