website/layouts/shortcodes/youtube.html

{{ $code := "helloworld" }}
{{ if (.Get "code") }}
{{ $code = (.Get "code") }}
{{ else if (.Get "src") }}
{{ $code = (.Get "src") }}
{{ $code = (strings.ReplaceRE `(http(?:s)?:\/\/(?:www\.)?youtu(?:(?:be\.com)|(?:\.be))|(?:be-nocookie\.com))\/(?:(?:watch\?v=)|(?:embed\/)|(?:\/v\/))?(.+)?(?:\&|\?)` "" $code) }}
{{ end }}
{{ if (.Get "iframemode") }}
<center>
    <iframe class="youtubelink" src="https://youtube.com/embed/{{ $code }}?cc_load_policy=1&cc_lang_pref=fr&hl=fr-FR&autohide=2&wmode=transparent" allowfullscreen="true"></iframe>
</center>
</center>
{{ else }}
<center>
<a class="youtubelink static" href="https://youtu.be/{{ $code }}"><img src="http://i3.ytimg.com/vi/{{ $code }}/hqdefault.jpg"/></a>
</center>
{{ end }}
<style>
.youtubelink{
    display:block;
    position:relative;
    width:100%;
    height:597px;
    &.static{
	&::after{
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    position:absolute;
	    left:50%;
	    top:50%;
	    transform: translate(-50%, -50%);
	    width:80px;
	    height:80px;
	    content:"Play on youtube";
	    color:white;
	    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(/youtube.svg);
	    background-size:cover;
	}
	img{
	    width:100%!important;
	    height:100%!important;
	}
    }
}
</style>