こんばんは。てんめいです。
今回の記事では、Wordpressの記事内にYoutubeの動画を埋め込む手順について解説します。
この記事の目次
1.Youtubeから動画のURLを取得する
2.どの端末で見てもサイズが合うようにする
3.動画を途中から流したい場合の設定
1.Youtubeから動画のURLを取得する
Youtubeアカウントを作成するためには、Googleアカウントが必要です。
こちらの公式ヘルプにアカウント作成に関する内容が記載されていますので、まずはYoutubeアカウントを作成してください。
Youtubeアカウントの作成が終わったら、自分のブログに埋め込みたい動画を探し、動画画面へ進みます。
※ 注意: 違法アップロードされた動画等を埋め込んだ場合、著作権法違反になる場合があります(著作権者に許諾を得ずにアップロードしているゲームやアニメなど)。動画をブログに埋め込む際は、「公式動画」もしくは「自分自身で制作した動画」を埋め込むようにしたほうが無難です。ちなみに、動画アップロード側は共有して欲しくない場合、共有できないように設定できます。公式動画で共有不可設定していないという場合は埋め込んでも大丈夫な場合がほとんどです(ただし、再編集はご法度)。





これで動画の埋め込み自体は完了したかと思いきや、実はこれでは不十分です。
スマホやタブレットなど、PCと違う大きさのモニターで見たときに枠がはみ出してしまい、サイトの景観を損ねてしまう場合があるからです。
2.どの端末で見てもサイズが合うようにする
どの端末で見てもサイズがきちんと枠内に収まるようにするには「Embed Responsively」というコード変換サービスを利用します。




これで動画を流すための設定は完了です。
3.動画を途中から流したい場合の設定
動画を途中から流したい場合に「Embed Responsively」を使うと以下のようにエラーになってしまいます。


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

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


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