みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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

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

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

投稿日時 - 2018-10-25 19:25:50

QNo.9551201

困ってます

質問者が選んだベストアンサー

自分の狙ったとおりにカスタマイズできるため、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

投稿日時 - 2018-10-26 23:05:58

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問