hugo 插入 youtube 视频

我用的这个 hugo 博客框架的主题本身没有带 youtube 的 shortcode, 我之前往里面插视频都是放在 B 站上，之后打算 B 站和 youtube 都放上， 这样一旦一个失效了，另一个还能做个备份，记录下如何在文章中插入 YouTube 视频。

首先在使用的 theme 主题的 layouts 下的 shortcode 下新建一个 youtube.html 的文件，内容如下：

<style>
    .meta-media {
        position: relative;
        margin-bottom: 30px;
        display: flex;
        width: 100%;
        height: 0;
        padding-bottom: 75%;
    }
    .video {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
</style>
<div class="meta-media">
    <iframe src="https://www.youtube.com/embed/{{ .Get 0 }}" frameborder="no" scrolling="yes" allowfullscreen="allowfullscreen" high_quality="1" framespacing="1" class="video" >
    </iframe>
</div>

然后在需要插入视频的地方增加如下的代码，使用时删除里面的 @ 符号:

{@{< youtube rK4EA9xWzXE >}@}

其中 rK4EA9xWzXE 这个是你需要插入的 youtube 视频的ID，可以从 youtube 视频的链接中提取 https://www.youtube.com/watch?v=rK4EA9xWzXE. 现在就可以看到下面这个视频了。

// todo 如何支持 HDR 播放与上传