Added custom youtube embed handling via shortcode

2022-09-07 12:25:04 +01:00 · 2022-09-07 12:25:04 +01:00 · 5cb7f5e623
commit 5cb7f5e623
parent db716b1a21
8 changed files with 70 additions and 3 deletions
--- a/content/blog/bookstack-release-v22-09.md
+++ b/content/blog/bookstack-release-v22-09.md
@ -140,7 +140,7 @@ As a usage example I published a video on the BookStack YouTube channel showing
 how to leverage these new templates to add a custom header and footer 
 to PDF exports: 
  
-{{< youtube 5bZ7zlNEphc >}} 
+{{< yt 5bZ7zlNEphc >}} 
  
 ### Translations 
  
--- a/static/images/yt/5bZ7zlNEphc.webp
+++ b/static/images/yt/5bZ7zlNEphc.webp
--- a/static/images/yt/readme.md
+++ b/static/images/yt/readme.md
@ -0,0 +1,18 @@
+This directory stores YT thumbnails for display.  
+  
+From [this post](https://raw.githubusercontent.com/paulirish/lite-youtube-embed/master/youtube-thumbnail-urls.md): 
+  
+YT thumbnails (eg https://i.ytimg.com/vi/ogfYd705cRs/sddefault.jpg) have multiple resolutions with the following widths: 
+  
+- `maxresdefault`: 1280px 
+- `sddefault`: 640px 
+- `hqdefault`: 480px (lol, naming is hard) 
+- `mqdefault`: 320px 
+- `default`: 120px 
+  
+  
+A script is in this folder for downloading a thumbnail and converting it to a compressed webp image: 
+  
+```shell 
+./thumb.sh 5bZ7zlNEphc 
+``` 
--- a/static/images/yt/tSaDVduc3uI.webp
+++ b/static/images/yt/tSaDVduc3uI.webp
--- a/static/images/yt/thumb.sh
+++ b/static/images/yt/thumb.sh
@ -0,0 +1,4 @@
+#!/bin/bash 
+  
+VID="$1" 
+curl https://i.ytimg.com/vi/$VID/maxresdefault.jpg | convert -quality 70 - "$VID.webp" 
--- a/themes/bookstack/layouts/section/docs.html
+++ b/themes/bookstack/layouts/section/docs.html
@ -54,7 +54,11 @@
 </p> 
 </div> 
 <div class="col-md-6"> 
-<iframe loading="lazy" width="560" height="315" src="https://www.youtube-nocookie.com/embed/tSaDVduc3uI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
+<div class="youtube-embed-wrap" style="max-width: 560px;"> 
+<a href="https://www.youtube.com/watch?v=tSaDVduc3uI" target="_blank" title="View Video" rel="noreferrer noopener"> 
+<img src="/images/yt/tSaDVduc3uI.webp" alt="YouTube Video Thumbnail"> 
+</a> 
+</div> 
 </div> 
 </div> 
 </div> 
--- a/themes/bookstack/layouts/shortcodes/yt.html
+++ b/themes/bookstack/layouts/shortcodes/yt.html
@ -0,0 +1,6 @@
+{{ $vidId := .Get 0 }} 
+<div class="youtube-embed-wrap"> 
+ <a href="https://www.youtube.com/watch?v={{ $vidId }}" target="_blank" title="View Video" rel="noreferrer noopener"> 
+ <img src="/images/yt/{{ $vidId }}.webp" alt="YouTube Video Thumbnail"> 
+ </a> 
+</div> 
--- a/themes/bookstack/sass/styles.scss
+++ b/themes/bookstack/sass/styles.scss
@ -384,7 +384,8 @@ input[type="text"].doc-search-input {
 } 
 } 
  
-iframe[src^="https://www.youtube-nocookie.com"] { 
+iframe[src^="https://www.youtube-nocookie.com"], 
+.youtube-embed-wrap a { 
 max-width: 100%; 
 aspect-ratio: 16/9; 
 height: auto; 
@ -394,6 +395,40 @@ iframe[src^="https://www.youtube-nocookie.com"] {
 background-color: #222; 
 } 
  
+.youtube-embed-wrap a { 
+ display: block; 
+ position: relative; 
+} 
+.youtube-embed-wrap a::before, 
+.youtube-embed-wrap a::after { 
+ content: ''; 
+ left: 0; 
+ position: absolute; 
+ width: 100%; 
+ height: 100%; 
+ transition: opacity ease-in-out 120ms; 
+} 
+.youtube-embed-wrap a::before { 
+ background-color: $primary; 
+ opacity: 0.3; 
+} 
+.youtube-embed-wrap a::after { 
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' fill='%23FFFFFF'%3E%3Cpath d='M19.15 32.5 32.5 24l-13.35-8.5ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm0-3q7.1 0 12.05-4.975Q41 31.05 41 24q0-7.1-4.95-12.05Q31.1 7 24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24 41Zm0-17Z'/%3E%3C/svg%3E"); 
+ background-repeat: no-repeat; 
+ opacity: 0.8; 
+ background-position: 50% 50%; 
+ background-size: 100px 100px; 
+} 
+.youtube-embed-wrap a:hover::before { 
+ opacity: 0.4; 
+} 
+.youtube-embed-wrap a:hover::after { 
+ opacity: 1; 
+} 
+.youtube-embed-wrap a img { 
+ object-fit: cover; 
+} 
+  
 .meilisearch-autocomplete .docs-searchbar-footer-logo, 
 .meilisearch-autocomplete .docs-searchbar-footer { 
 vertical-align: top !important;