I love the frozen FOOD.
wordpressなどにYoutubeの動画を張り付ける場合、iframeを使うことが多いです。
2014.10現在、youtubeで「埋め込みコード」のボタンを押すと、こんなようなタグが生成されるかと思います。
<iframe width="560" height="315" src="//www.youtube.com/embed/vn5Ikcg5mQQ" frameborder="0" allowfullscreen> </iframe>
これを記事にペーストしてあげるだけです。
テーマによっては、記事に「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のテクニックを利用します。
小難しく感じるかもしれませんが、やることは単純です。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を書きかきしてるだけです。
たとえば、こんな感じで出てくるわけです。
Gem-one(ジェムワン) 権蔵
Gem-one代表.システム開発業ブランドGem-one adIT、音楽レッスン事業 Gem-one Music設立。ビリヤード・スケジュールサイト すけどんも絶賛運用中。
■ブログ
ちょろっとお時間頂戴