-
-
Notifications
You must be signed in to change notification settings - Fork 103
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: weru <[email protected]>
- Loading branch information
Showing
9 changed files
with
103 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| {{ $baseurl := absURL "" }} | ||
| {{ $includeLiteYT := false }} | ||
| <!-- begin search for liteyoutube shortcode. code borrowed from erichc Nov 2020 https://discourse.gohugo.io/t/automagically-loading-suitable-scripts-in-head/29429/8 --> | ||
| {{ if .IsNode }} | ||
| {{ range .Pages }} | ||
| {{ range .Pages }} | ||
| <!-- another recursion because of the "/posts/xyz" structure; does work with category lists --> | ||
| {{ $rawsummary := split .RawContent "<!--more-->" }} | ||
| <!-- prepare for checking only the part of the article that will show up on the list page --> | ||
| {{ if (findRE "liteyoutube" (index $rawsummary 0)) }} | ||
| {{ $includeLiteYT = true }} | ||
| {{ end }} | ||
| {{ end }} | ||
| {{ end }} | ||
| {{ end }} | ||
| {{ if (.HasShortcode "liteyoutube") }} | ||
| {{ $includeLiteYT = true }} | ||
| {{ end }} | ||
| {{ if $includeLiteYT }} | ||
| {{ $styles := printf "%s/css/lite-yt-embed.css" $baseurl }} | ||
| {{ $scripts := printf "%s/js/lite-yt-embed.js" $baseurl }} | ||
| <link rel="stylesheet" href={{ $styles }}> | ||
| <script src={{ $scripts }}></script> | ||
| {{ end }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,16 @@ | ||
| {{ if .IsNamedParams }} | ||
| {{ $videoid := .Get "videoid" }} <!-- required. --> | ||
| {{ $img := .Get "img" }} <!-- not required. The initial background image instead of a generated one. --> | ||
| <div class="video"> | ||
| {{- $videoid := .Get 0 -}} | ||
| {{- $img := .Get 1 -}} | ||
| {{- $params := .Get 2 -}} | ||
| {{ $bkImg := "" }} | ||
| {{ $params := .Get "params" }} <!-- not required. List of params here: https://developers.google.com/youtube/player_parameters --> | ||
| {{ with $img }} | ||
| {{ $bkImg := absURL (printf "images/%s" .) }} | ||
| <lite-youtube videoid="{{$videoid}}"{{ with $bkImg }} style="background-image: url('{{ . }}')"{{ end }}{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> | ||
| {{ else }} | ||
| <lite-youtube videoid="{{$videoid}}"{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> | ||
| {{ if .IsNamedParams }} | ||
| {{ $videoid = .Get "videoid" }} | ||
| {{ $img = .Get "img" }} | ||
| {{ $bkImg = "" }} | ||
| {{ $params = .Get "params" }} | ||
| {{ end }} | ||
| {{ else }} | ||
| {{- $videoid := .Get 0 -}} <!-- required. --> | ||
| {{- $img := .Get 1 -}} <!-- not required. The initial background image instead of a generated one. --> | ||
| {{- $params := .Get 2 -}} <!-- not required. List of params here: https://developers.google.com/youtube/player_parameters --> | ||
| {{ $bkImg := "" }} | ||
| {{ with $img }} | ||
| {{ $bkImg := absURL (printf "images/%s" .) }} | ||
| <lite-youtube videoid="{{$videoid}}"{{ with $bkImg }} style="background-image: url('{{ . }}')"{{ end }}{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> | ||
| {{ else }} | ||
| <lite-youtube videoid="{{$videoid}}"{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> | ||
| {{ end }} | ||
| {{ end }} | ||
| <lite-youtube videoid="{{ $videoid }}"{{ with $bkImg }} style="background-image: url({{ . }})"{{ end }}{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,86 @@ | ||
| /* Originally obtained from Paul Irish https://github.com/paulirish/lite-youtube-embed */ | ||
| lite-youtube { | ||
| background-color: #000; | ||
| position: relative; | ||
| display: block; | ||
| contain: content; | ||
| background-position: center center; | ||
| background-size: cover; | ||
| cursor: pointer; | ||
| max-width: 720px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| background-color: #000; | ||
| position: relative; | ||
| display: block; | ||
| contain: content; | ||
| background-position: center; | ||
| background-size: cover; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| /* gradient */ | ||
| lite-youtube::before { | ||
| content: ''; | ||
| display: block; | ||
| position: absolute; | ||
| top: 0; | ||
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); | ||
| background-position: top; | ||
| background-repeat: repeat-x; | ||
| height: 60px; | ||
| padding-bottom: 50px; | ||
| width: 100%; | ||
| transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); | ||
| content: ''; | ||
| display: block; | ||
| position: absolute; | ||
| top: 0; | ||
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); | ||
| background-position: top; | ||
| background-repeat: repeat-x; | ||
| height: 60px; | ||
| padding-bottom: 50px; | ||
| width: 100%; | ||
| transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); | ||
| } | ||
|
|
||
| /* responsive iframe with a 16:9 aspect ratio | ||
| thanks https://css-tricks.com/responsive-iframes/ | ||
| thanks https://css-tricks.com/responsive-iframes/ | ||
| */ | ||
| lite-youtube::after { | ||
| content: ""; | ||
| display: block; | ||
| padding-bottom: calc(100% / (16 / 9)); | ||
| content: ""; | ||
| display: block; | ||
| padding-bottom: calc(100% / (16 / 9)); | ||
| } | ||
| lite-youtube > iframe { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| border: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| border: 0; | ||
| } | ||
|
|
||
| /* play button */ | ||
| lite-youtube > .lty-playbtn { | ||
| display: block; | ||
| width: 68px; | ||
| height: 48px; | ||
| position: absolute; | ||
| cursor: pointer; | ||
| transform: translate3d(-50%, -50%, 0); | ||
| top: 50%; | ||
| left: 50%; | ||
| z-index: 1; | ||
| background-color: transparent; | ||
| /* YT's actual play button svg */ | ||
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>'); | ||
| filter: grayscale(100%); | ||
| transition: filter .1s cubic-bezier(0, 0, 0.2, 1); | ||
| border: none; | ||
| display: block; | ||
| width: 68px; | ||
| height: 48px; | ||
| position: absolute; | ||
| cursor: pointer; | ||
| transform: translate3d(-50%, -50%, 0); | ||
| top: 50%; | ||
| left: 50%; | ||
| z-index: 1; | ||
| background-color: transparent; | ||
| /* YT's actual play button svg */ | ||
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>'); | ||
| filter: grayscale(100%); | ||
| transition: filter .1s cubic-bezier(0, 0, 0.2, 1); | ||
| border: none; | ||
| } | ||
|
|
||
| lite-youtube:hover > .lty-playbtn, | ||
| lite-youtube .lty-playbtn:focus { | ||
| filter: none; | ||
| filter: none; | ||
| } | ||
|
|
||
| /* Post-click styles */ | ||
| lite-youtube.lyt-activated { | ||
| cursor: unset; | ||
| cursor: unset; | ||
| } | ||
| lite-youtube.lyt-activated::before, | ||
| lite-youtube.lyt-activated > .lty-playbtn { | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .lyt-visually-hidden { | ||
| clip: rect(0 0 0 0); | ||
| clip-path: inset(50%); | ||
| height: 1px; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| white-space: nowrap; | ||
| width: 1px; | ||
| } | ||
| clip: rect(0 0 0 0); | ||
| clip-path: inset(50%); | ||
| height: 1px; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| white-space: nowrap; | ||
| width: 1px; | ||
| } |