簡単!ブログ・TwitterなどにYouTubeを埋め込む方法とレスポンシブ対応

Other

YouTubeの動画は、自サイト内やTwitter、Facebookなどに簡単に埋め込む事が出来ます。非常に簡単なのでサクッと。

 

以下のように様々なサイトに「ワンクリック」で埋め込み可能です。

YouTubeを埋め込む1

赤枠に囲った矢印を押すと更に表示されます。

YouTubeを埋め込む2

例:Twitterボタンを押すと

YouTubeをTwitterに投稿

Twitterにログインしていれば以下のようにツイート画面が開くので「ツイート」を押すだけでツイート完了です。

YouTubeをTwitterに投稿

 

ブログへの埋め込み方法

アドレスで埋め込む方法とフレームで埋め込む方法があります。

共通

埋め込みたいYouTubeを表示し、下にある「共有」を押します。

YouTube共有
※画像です

 

URLで埋め込む

以下のポップアップが開くので、「コピー」を押すとアドレスがクリップボードにコピーされます。

YouTubeをURLで埋め込み

 

そのままブログに貼れば完了。

ワードプレスの場合はテキストエディタ画面か、ブロックエディタの埋め込みブロックの「YouTubeにコピーしたアドレスを貼り付けます。

■ブロックエディタの場合

ブロックエディタにYouTube埋め込み

ブロックエディタにYouTube埋め込み

 

 

アドレスを貼っただけの表示例

 

モバイルでは

YouTubeモバイル表示例

 

ワードプレスでは、このようにアドレスを貼るだけでモバイルでもきちんと縮小されて表示されます。

 

iframeで埋め込む

共有メニューにある「埋め込む」を押します。

YouTubeをiframeで埋め込む 以下のようなポップアップが出るので「コピー」を押してコードをクリップボードにコピーします。

※「開始時間」に任意の秒数を指定し、開始時間を指定する事も出来ます。

YouTubeをiframeで埋め込む

ワードプレスの場合はテキストエディタ画面か、ブロックエディタのフォーマットブロックの「カスタムHTMLにコピーしたアドレスを貼り付けます。

■ブロックエディタの場合

ブロックエディタにYouTube埋め込み

ブロックエディタにYouTube埋め込み

 

「iframe」で埋め込んだ例

こちらもワードプレスでは問題なくレスポンシブで表示されます。

 

レスポンシブ非対応のブログで埋め込む場合

ifameコードで埋め込み、そのコードを「DIVタグ」で囲む事で、自分で指定したCSSデザインで表示できますので、CSSでレスポンシブになるように記述すれば可能です。

HTMLとCSSをカスタム

HTML

例:<div class="youtube"></div>で囲う

<div class="youtube">
<iframe src="https://www.youtube.com/embed/XXXXX" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

 

CSS

縦横の比率を16:9で表示させ、縮小してもその比率を保つように56.25%を指定し、フレームを縦・横ともに100%で表示するように記述します。

.youtube {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
} 
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

 

以上です。

関連記事

Other

Posted by 綾糸