先輩コーダーのソースは宝の山!第2弾です。
▼第一弾の記事はこちら
今回はwordpressデフォルト機能の新発見のお話です。
wordpressに動画を挿入する際の方法は下記の2パターンが多いです。
①Youtubeなどの外部サービスの動画を埋め込む
②サーバーに動画をアップロードし、videoタグで読み込む
①の場合は、専用のソースか簡単に取得出来ますし、同じサービスであればどのブラウザで見ても同じ体裁で表示されます。
②の場合は下記のようなソースで埋め込みます。
この場合、ユーザーの使っているブラウザによって若干体裁が異なります。



こんな感じですね。そこまで大きなこだわりがなければ、表示・再生に不具合があるわけではないのでいいのですが、実はwordpressのショートコードを使うと簡単に体裁が揃います。
[video src="..."]試しにサンプルソースを入れたので、ブラウザを変えて見てみてください。どれも一緒になっていますよね?
ちなみに、裏側を紐解いてみると、MediaElement.jsというJavascriptのライブラリが動いているようです。静的なLPなどを作るときもこのライブラリを使えば出来そうですね。
他にも画像を横並びにするgalleryや音声ファイルを埋め込むaudioなどのショートコードタグがありました!以外と気が付かないと使わないwordpressのデフォルト機能の話でした。
今回の先輩コーダーはさとさんでした!
https://apricot-design.com/staff/sato-tomoe/
-
人気の記事
-
新着記事
-
カテゴリー
<video src="sample.mp4" controls></video>