こんばんは。てんめいです。

 

今回の記事では、Wordpressの記事内にYoutubeの動画を埋め込む手順について解説します。


<スポンサーリンク>


この記事の目次

1.Youtubeから動画のURLを取得する
2.どの端末で見てもサイズが合うようにする
3.動画を途中から流したい場合の設定

 

1.Youtubeから動画のURLを取得する

Youtubeアカウントを作成するためには、Googleアカウントが必要です。
こちらの公式ヘルプにアカウント作成に関する内容が記載されていますので、まずはYoutubeアカウントを作成してください。

 

Youtubeアカウントの作成が終わったら、自分のブログに埋め込みたい動画を探し、動画画面へ進みます。
※ 注意: 違法アップロードされた動画等を埋め込んだ場合、著作権法違反になる場合があります(著作権者に許諾を得ずにアップロードしているゲームやアニメなど)。動画をブログに埋め込む際は、「公式動画」もしくは「自分自身で制作した動画」を埋め込むようにしたほうが無難です。ちなみに、動画アップロード側は共有して欲しくない場合、共有できないように設定できます。公式動画で共有不可設定していないという場合は埋め込んでも大丈夫な場合がほとんどです(ただし、再編集はご法度)。

 

Youtube動画画面の「共有」をクリック。

 

表示されたURLをコピーする。

 

WordPressのダッシュボードから「投稿」「新規追加」をクリック。

 

「テキスト」の編集画面を開き、本文に先ほどYoutubeでコピーしたURLを貼り付け、「プレビュー」で確認する。

 

動画が投稿されました。

 

これで動画の埋め込み自体は完了したかと思いきや、実はこれでは不十分です。

 

スマホやタブレットなど、PCと違う大きさのモニターで見たときに枠がはみ出してしまい、サイトの景観を損ねてしまう場合があるからです。

 

2.どの端末で見てもサイズが合うようにする

どの端末で見てもサイズがきちんと枠内に収まるようにするには「Embed Responsively」というコード変換サービスを利用します。

 

「Embed Responsively」をブラウザで開き、YoutubeでコピーしたURLを検索窓に貼り付け。

 

画面下にレスポンシブデザインに対応した動画コードが出てくるのでコピーする。

 

WordPressの本文にコードを張り付け。

 

記事本文の枠に合わせて動画の表示広がっているかプレビューで確認する。

 

これで動画を流すための設定は完了です。

 

3.動画を途中から流したい場合の設定

動画を途中から流したい場合に「Embed Responsively」を使うと以下のようにエラーになってしまいます。

 

動画を途中から流すためYoutube側で開始時間を指定しコード変換したがエラーになってしまう。

 

エラーが出ると動画がブログ内でも流れなくなる。

 

そこで、コード自体を書き換えるという作業が必要になってきますので、以下のような流れでコードを書き換えます。

 

上記赤枠内のコードを書き換えることになる(画像は書き換え後)。

 

初期では「skTMlh39RZg’frameborder~」となっている部分を「skTMlh39RZg?start=66’frameborder~」に書き換えています。
上記箇所に「?start=表示開始したい秒数」をコードに追記すると、その位置から動画を再生してくるというもの。
たとえば、今回の場合1分6秒の場所から再生して欲しかったので、1分=60秒+6秒=66 という数値を追記しています。

 

WordPressの本文にコードを貼り付けプレビューで確認する。

 

Youtubeの埋め込み動画に途中から再生するマークがついていたら成功。

 

いかがでしたでしょうか。

 

慣れてしまえば簡単なので、動画を埋め込んでよりよいコンテンツづくりをしていきましよう!
※ 著作権法違反にはくれぐれもご注意くださいね!


<スポンサーリンク>