ここは僕の冷蔵庫。後はあれして食べるだけ。

I love the frozen FOOD.

wordpressなどにYoutubeの動画を張り付ける場合、iframeを使うことが多いです。

張り付ける方法

youtubeで貼り付け用のコードをもらう

2014.10現在、youtubeで「埋め込みコード」のボタンを押すと、こんなようなタグが生成されるかと思います。

<iframe width="560" height="315" src="//www.youtube.com/embed/vn5Ikcg5mQQ" frameborder="0" allowfullscreen>
</iframe>

これを記事にペーストしてあげるだけです。

Wodpressへ直接貼り付ける

テーマによっては、記事に「https://www.youtube.com/watch?v=vn5Ikcg5mQQ」などと、youtubeのアドレスを貼るだけで動画は張り付けられる場合もありますねん。
—-
ただ、これらには少々難点が。。。
widthやheightが強制的に記載されているので、ブラウザのサイズに応じたフレキシブルなものが出せない。
ちょっと私は好きじゃありません。

まずの対策

そこで、こんな感じで記事に貼り付けます。

<div class="youtube">
  <iframe src="//www.youtube.com/embed/動画のID" frameborder="0" allowfullscreen>
  </iframe>
</div>

iframeで出力するyoutube動画のサイズは指定しません。
あわせて、iframeの周りにdiv要素をつけてます。こうすることで、css上で結構色々加工できますからね。
尚、動画のIDは、「https://www.youtube.com/watch?v=vn5Ikcg5mQQ」のvn5Ikcg5mQQの部分です。
併せて、css上で

div.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
div.youtube iframe,
div.youtube object,
div.youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

のように指定してあげます。
こうすると、いつでも記事の幅いっぱいに、youtube動画がみられますよ。

面倒解消

youtubeを張り付けるのに、いつも動画IDを抜き出して、先ほどのタグでHTMLを作るのは面倒です。
ですので、「wordpressのshortcode機能拡張 」で紹介したshortcodeのテクニックを利用します。

参考 : wordpressのshortcode機能拡張

shortcode実装方法

小難しく感じるかもしれませんが、やることは単純です。function.php に下記のコードを記載します。

function gemone_shortcode_youtube( $attr , $content=null )
{
    preg_match( '/\?v=([\w-]+)/',$content,$mat );
    return( '<div class="youtube"><iframe src="//www.youtube.com/embed/'.$mat[1].'" frameborder="0" allowfullscreen></iframe></div>' );
}
add_shortcode('tube', 'gemone_shortcode_youtube');

wordpressの記事の中では、

[tube]https://www.youtube.com/watch?v=vn5Ikcg5mQQ[/tube]

って記載すればOK。tubeの中に記載するのは、youtube動画のURLそのままです。
そうすると、wordpressの記事にyoutube動画が張り付けられますよ。
—-
先ほどのコードの説明を少し。
preg_match関数で、「https://www.youtube.com/watch?v=vn5Ikcg5mQQ」のvn5Ikcg5mQQの部分を抜き出してます。
抜き出したあと、先ほどのHTMLを書きかきしてるだけです。
たとえば、こんな感じで出てくるわけです。


尚、youtubeの動画の周りに、少し飾りをつけたいなんて方は、下記の記事をどうぞ♪
参考 : (付録記事)wordpressにyoutubeを張り付ける際のテクニックの付録

参考

参考記事


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


*