なんでもiframeレスポンシブ対応

Vineを投稿する際にFitvidsは使ってみたのですがなんか高さいまいち崩れてるなと思ってました…

CSSでやればいいのになんでやらなかったんだろう？と思いながら再度レスポンシブ対応での動画を組み込む方法を探したらいろいろ出てきたのでメモ。

動画や地図などの埋め込みは全てiframeという前提があるので

まずiframe用のレスポンシブ対応のCSS(class）を作成

/*　iframeレスポンシブ対応*/

.embedmedia-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    height: auto; 
} 
.embedmedia-container iframe, 
.embedmedia-container object, 
.embedmedia-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
  width: 100% !important;
  height: 100% !important;
}

それで、今後は上記CSSで作ったクラスを当てたタグで囲んで埋め込めばOK。

<div class="embedmedia-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/FZRb0rNfvQk" frameborder="0" allowfullscreen></iframe>
</div>

さらに埋め込み用のタグをAddQuicktagで投稿画面に1クリックで追加できるように追加すると、今後は埋め込み用のタグを取得後は1クリックで投稿に追加できる。
AddQuicktagについて詳細はこちら

おわり。

結果

 

参考サイト

http://h2ham.net/youtube-responsive
http://webshufu.com/embed-youtube-and-google-map-responsively/
http://webshufu.com/edit-quicktags/
http://www.html5-memo.com/mdn01/wordpress16/
http://usedoor.jp/howto/web/wordpress/addquicktag-plugin/

これを機にエラーを起こしてたFitvidについては削除。（過去記事も取り下げ）