先輩コーダーのソースは宝の山！—その②ー

先輩コーダーのソースは宝の山！第２弾です。

▼第一弾の記事はこちら

先輩コーダーのソースは宝の山！

今回はwordpressデフォルト機能の新発見のお話です。

wordpressに動画を挿入する際の方法は下記の2パターンが多いです。

①Youtubeなどの外部サービスの動画を埋め込む

②サーバーに動画をアップロードし、videoタグで読み込む

①の場合は、専用のソースか簡単に取得出来ますし、同じサービスであればどのブラウザで見ても同じ体裁で表示されます。

②の場合は下記のようなソースで埋め込みます。

この場合、ユーザーの使っているブラウザによって若干体裁が異なります。

こんな感じですね。そこまで大きなこだわりがなければ、表示・再生に不具合があるわけではないのでいいのですが、実はwordpressのショートコードを使うと簡単に体裁が揃います。

試しにサンプルソースを入れたので、ブラウザを変えて見てみてください。どれも一緒になっていますよね？

ちなみに、裏側を紐解いてみると、MediaElement.jsというJavascriptのライブラリが動いているようです。静的なLPなどを作るときもこのライブラリを使えば出来そうですね。

他にも画像を横並びにするgalleryや音声ファイルを埋め込むaudioなどのショートコードタグがありました！以外と気が付かないと使わないwordpressのデフォルト機能の話でした。

今回の先輩コーダーはさとさんでした！
https://apricot-design.com/staff/sato-tomoe/