Hugoで記事を作成していると、

時々TwitterのツイートやYoutubeの記事を埋め込みたいと思ったことがあります。

　

　

Youtubeの通常の埋め込み方法

YoutubeだとHTMLコードを埋め込めるようにソースコードが用意されています。

例えば好きな動画を埋め込みたいと言う場合、以下の手順で実行します。

　

1.まず載せたい動画を開き「共有」をクリックします。

　

2.共有の項目から「埋め込む」をクリックします。

　

3.コードが出てきますので、右下の「コピー」をクリックするとURLがコピーできます。

　

4.コピーしたHTMLをHugoの記事にそのまま貼り付けると下のように動画が表示されます。

　

上記のソースコードは以下のようになっております。


<iframe width="560" height="315" src="https://www.youtube.com/embed/5vTYizII_lM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

　

　

Twitterのツイートの埋め込み方法

最初Twitterにはないのかなと思いましたがWeb版にはありました。

例えば好きなツイートを埋め込みたいと言う場合、以下の手順で実行します。

　

1.埋め込みたいツイートを開いて右側の矢印をクリックします。

　

2.「ツイートを埋め込む」をクリックします。

　

3.別サイトが開くので、「Copy Code」をクリックしてHTMLをコピーします。

　

4.コピーしたHTMLをHugoの記事にそのまま貼り付けると下のように動画が表示されます。

　

ソースコードは以下のようになっております。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">8月25日<br>🇮🇳インド国民お祭り騒ぎ😆<br><br>世界トップの製作本数観＆客動員数🎬<br>ハリウッドスター以上に稼ぐ💰俳優たち⁉️<br><br>資金のかけ方が半端ない💥豪華な <a href="https://twitter.com/hashtag/%E3%83%9C%E3%83%AA%E3%82%A6%E3%83%83%E3%83%89?src=hash&amp;ref_src=twsrc%5Etfw">#ボリウッド</a> 事情‼️<br>観客は国歌斉唱⁉️<br><br>その数２万点以上！<br>平成の文化が詰まった、<br>当時の勢い溢れ出す <a href="https://twitter.com/hashtag/%E5%B9%B3%E6%88%90%E3%83%AC%E3%83%88%E3%83%AD%E3%82%B0%E3%83%83%E3%82%BA?src=hash&amp;ref_src=twsrc%5Etfw">#平成レトログッズ</a>！<br><br>平成懐かし部屋再現‼️ <a href="https://t.co/VdA2DsvC5d">pic.twitter.com/VdA2DsvC5d</a></p>&mdash; マツコの知らない世界 (@tbsmatsukosekai) <a href="https://twitter.com/tbsmatsukosekai/status/1296703736115388417?ref_src=twsrc%5Etfw">August 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

　

　

Hugoでshortcodeを使って埋め込む

直接埋め込む方法でも分かりやすいと思いますが、

Hugoにはshortcodeを使って埋め込むというやり方もあるそうです。

　

Youtubeの動画をshortcodeを使って埋め込む場合

1.まずURLの該当部分をコピーします。

　

2.以下のコードのように書きます。

　

3.記事に埋め込むことで反映されます。

　

　

Twitterのツイートをshortcodeを使って埋め込む場合

1.まずURLの該当部分をコピーします。

　

2.以下のコードのように書きます。

　

3.記事に埋め込むことで反映されます。

　

　

まとめ

どれが正解ということはないです。

どれを採用するかは各自の好み次第かと思います。

　

　

参考

Hugoの記事にコンテンツを埋め込む