youtubeの「共有」と「埋め込みコード」

質問

youtube動画をブログに貼り付けたいと思っています。
「共有」と「埋め込みコード」がありますが、どちらを使うべきでしょうか？

PC・スマホ・タブレットなどで、最適な表示の仕方をしたいです。
なので、「埋め込みコード」で動画の大きさを指定すると崩れるかなと思っています。

ですが、「埋め込みコード」には埋め込みオプションなどがあるようです。

みなさんは、ブログにyoutube動画を貼る時、
「共有」と「埋め込みコード」どちらを選び、どのように貼っていますか？

ブログはWordPressです。
よろしくお願いいたします。

回答No.1

Katsu_Kaiz · ベストアンサー

自分の狙ったとおりにカスタマイズできるため、WordPressであれば「埋め込みコード」を使っています。もうひとつの「共有」というのは、どちらかといえばSNSでの紹介用ではないでしょうか。

ただし、「埋め込みコード」でレスポンシブデザイン（PCやスマホ・タブレット向けの表示）を実現するには、CSSの知識や追加が必要になります。

<!-- YouTubeのHTMLソース -->
<div class="iframe-container">
<iframe src="動画のURL" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

<style>
/* 追加するCSS */
.iframe-container {
position: relative;
margin: 0;
padding: 0 0 56.25%;
}

.iframe-container iframe {
width: 100%;
height: 100%;
position: absolute;
border: none;
margin: 0;
padding: 0;
}
</style>

paddingの下側を56.25%だけ空けるというのがコツで、これでYouTubeの画面サイズを、いわゆるワイドテレビとおなじ画面比率で統一できます。近年の動画のほとんどは16:9のワイド画面でつくられているため、この大きさにあわせることで、PCにもスマホにもタブレットにも対応できるのです。

実際に表示させてみると、動画の縦横比が一切崩れることなく、そのままのかたちで綺麗に動画が拡大・縮小します。

CSSに慣れていないと難しいかもしれませんが、「埋め込みコード」そのままだと《width》や《height》が直接的な数字で指定されているため、とくにスマホのような小さい画面になると、表示が崩れることがあります。

そこで、《width》や《height》などを《%》で指定しなおしてあげることで、どんな大きさの画面にも対応できるようにしているわけです。

参考URL：

https://coliss.com/articles/build-websites/operation/css/experiments-in-fixed-aspect-ratios.html