2014年9月18日木曜日

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用にカスタマイズさせていただきました。

0 件のコメント:

コメントを投稿