YouTube動画の埋め込みをdivでラップしないでレスポンシブ化

YouTube動画を埋め込みすると一部テンプレートで微妙になりますが、エントリの全てをdivでラップするのもアレなのでサクっと。

テンプレート＞HTML編集　の
  </head> 　の直前あたりに

     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery(".entry-content>iframe[src*='youtube']").wrap("&lt;div class='iframe-wrap'>&lt;/div>");
});
    </script>
  </head>

テンプレート＞カスタマイズ＞上級者向け＞CSS を追加　に

/* iframe埋め込み */

.iframe-wrap {
position: relative;
padding-top: 56.25%;
width: 100%;
}

.iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

を追加。


参考:yoshide.comさんのコードをblogger用にカスタマイズさせていただきました。