AdminWeb

記事にYouTubeなどの動画を挿入

広告

記事の本文の中にYouTubeを例にして動画を挿入する方法について解説します。WordPressではYouTubeを含む多くのサービスでURLを記述するだけで動画が埋め込むことができます。

1.YouTubeの動画の挿入
2.メディア埋め込み機能を使えるサイト
3.[embed]ショートコード
4.YouTubeで提供されている埋め込みコードを使う

それでは実際に試してみます。記事の新規作成画面を開いて下さい。

p10-1

YouTubeの動画を挿入する場合には、本文中に挿入したい動画のURLを直接記述するだけで挿入することができます。

p10-2

注意点としては(1)URLがリンクにならないように挿入して下さい、(2)URLは独立した行として記述して下さい(URLの前後に他の文字などを記述しないで下さい)、の2点気を付けて下さい。

ではプレビューでどのように表示されるのかを確認してみます。

p10-3

YouTubeの動画が埋め込まれていました。普通に再生して閲覧することが可能です。もしYouTubeの動画が埋め込まれなかった場合は、先ほどの注意点にひっかかっていないかどうかを確認してみて下さい。

この方法で動画を埋め込む場合はサイズの指定はできません。埋め込まれた動画の幅は投稿画面の横幅に合わせて自動的に設定されます。

WordPressでURLを記述するだけでメディアの埋め込みが可能なサイト(サービス)はどのようなものがあるのかについては下記を参照されてみて下さい。(2013年12月時点の情報です)。

blip.tv
Bunkr
DailyMotion
Flickr
FunnyOrDie.com (WordPress 3.0)
Hulu
Instagram (WordPress 3.5)
Qik
Photobucket
PollDaddy
Rdio (WordPress 3.6)
Revision3
Scribd
SlideShare (WordPress 3.5)
SmugMug (WordPress 3.0)
SoundCloud (WordPress 3.5)
Spotify (WordPress 3.6)
Twitter (WordPress 3.4)
Viddler
Vimeo
YouTube
WordPress.tv

カッコ内に記述があるものは、どのバージョンのWordPressから対応したのかを表しています。

広告

URLを記述するだけで動画を埋め込みすることができますが、この方式ですと動画のサイズを指定することができません。サイズを指定したい場合には[embed]ショートコードを使用して下さい。

[embed width="幅" height="高さ"]http://www.example.com/xxx/yyy[/embed]

幅及び高さについてピクセル単位でサイズを指定して下さい。ただし埋め込まれる動画の幅と高さの比率は変わりませんので両方を指定しても意味がありません(YouTubeに関しては幅の設定だけが使用されているように思われます)。

では新しい記事に記述してみます。上がURLだけを記述して埋め込んだ場合、下が[embed]ショートコードを使って記述した場合です。

p10-4

ではプレビューでどのように表示されるのかを確認してみます。

p10-5

YouTubeの動画が指定した幅で埋め込まれました。

なお[embed]ショートコードを使って記述した場合は独立した行として記述しなくても動画を埋め込むことができます。下記では動画の前に「Look」というテキストを記述しています。

p10-6

ではプレビューでどのように表示されるのかを確認してみます。

p10-7

URLを記述して動画を埋め込んだ場合は独立した行にURLが記述されていないので動画の埋め込みが行われずにURLがそのまま表示されています。[embed]ショートコードを使った場合は動画の前に他の文字があっても動画の埋め込みが行われています。

YouTubeの動画の場合は、YouTube側で提供される埋め込みコードを使用することもできます。

p10-8

動画のサイズを「カスタムサイズ」に変更し幅と高さを指定します。(幅と高さの比率は変えられません)。

p10-9

それでは新規投稿画面を表示します。

p10-10

「テキスト」タブをクリックしテキストエディタに切り替えます。

p10-11

YouTubeの画面に表示されていた埋め込みコードを動画を埋め込みたい場所にそのまま記述します。これで埋め込みは完了です。

p10-12

なおビジュアルエディタに切り替えると次のような感じで表示されています。

p10-13

では動画を投稿しどのように表示されるのかを確認してみます。(YouTubeの埋め込みコードを使用する場合はプレビューでは動画が表示されませんでした)。

p10-14

指定したサイズで動画を埋め込むことができました。なお動画の幅に投稿画面の幅を超えるサイズを指定しても投稿画面の横幅に合わせて自動的に調整されて表示されます。

----

YouTubeの動画を例に動画を記事に埋めこむ3つの方法についてご紹介しました。利用方法に合わせて使い分けるようにされてみて下さい。

( Written by Tatsuo Ikura )