みなさん、こんにちは。
MEGIDO(メギド)です。

最近、とある案件で「WordPressの投稿にYouTube動画を埋め込んだけど、
レイアウトが崩れるから修正してほしい」という依頼がありました。

後ほど説明もしますが、YouTube動画をレスポンシブで埋め込むには、
YouTube動画のタグをdivタグで囲んでレスポンシブ化するのが一般的です。

WordPressの運用者がHTMLの知識があれば
「これからYouTube動画を埋め込む時はdivタグで囲んでください」で解決しそうですが、
今回の運用者はHTMLの知識がない方。

そもそもdivタグで囲んでもらうこと事態が面倒くさい、、、
投稿画面でYouTube動画を埋め込むだけで勝手にレスポンシブ化しないかなと
検討していたところ「javascript(jQuery)で要素を追加したら出来るのでは?」となりました。

そして調査してみて実装すると見事に解決!

今回はHTMLの知識がない方がYouTube動画を埋め込んだ時、
自動的にレスポンシブで埋め込まれる方法を紹介します。

 

Youtube動画をレスポンシブ化する方法

まずはYouTube動画をレスポンシブ表示する方法です。
今回の本筋ではないので簡単に説明したいと思います。
blogに表示させたい動画から埋め込みコードを取得。

そして取得した埋め込みコードをdivタグで囲んでください。
下記のようなコードになります。

そしてCSSに下記のコードを記述しましょう。

これで埋め込んだYouTube動画がレスポンシブで表示されます。
※padding-bottomについては動画のアスペクト比によって調整してください。

 

Youtube動画が自動でレスポンシブ化する方法

次にYouTube動画が自動でレスポンシブ化する方法をお伝えします。

結論から言うとjavascript(jQuery)でYouTube動画(iframeタグ)が埋め込まれた時に
自動でdivタグで囲まれるようにすることで自動化させます。

それを実現するのが下記のコードです。

コメントで書いてある通りですが1行目でdivタグを生成、
2行目でそのdivタグにclass名を追加、3行目で生成したdivタグでiframeタグを囲むようにしています。

wrapはjQueryのメソッドです。
これを使用することでマッチする要素を1つずつ囲むことが可能です。

この他にもjQueryのメソッドでは要素を囲むメソッドとして、
「マッチする要素の子要素を囲むwrapInner」、
「マッチする要素を1つにまとめて囲むwrapAll」があります。

本筋とそれるので説明は省略しますが、興味がある方は調べてみてください!

かなり簡単なコードだと思いますが、
これで投稿画面でYouTube動画を埋め込むと後は勝手にレスポンシブ化してくれます。

 

まとめ

今回はHTMLの知識がない方がYouTube動画を埋め込んだ時、
自動的にレスポンシブで埋め込まれる方法を紹介しました。

WordPressを運用する方はコーディング知識などがない方が多いと思うので
このパターンは覚えておいて損はないのではないでしょうか。

これを実装してjavascript(jQuery)は便利なメソッドがあると改めて思いました。
javascriptについてもどんどん勉強していきたいです!

最後までお読みいただきありがとうございました。

まとめ

SHARE

TEXT BY MEGIDO

CATEGORIES

RECOMMENDED POSTこの記事もおすすめ!