ニートブログむらくもの野望

13歳で働いた元少年労働兵がアラサーニートで人生を生ききる為に『やれたらやる』ブログ。「もしかしたらこれやったら違う日になるかも」

FC2ブログカスタム 世界貢献的おやくだち情報

【FC2カスタム備忘録】動画レスポンシブ/動画が自動でリサイズ

投稿日:2015年8月30日 更新日:

動画可変システム
・動画レスポンシブ

ユーチューブ動画の埋め込みを画面サイズに合わせて可変させるやりかた。 基本的にサイトのページサイズ一杯に広がる。狭くなればその分だけリサイズする。 つまりスマホ対応動画。

参考サイトさん
「Youtubeの埋め込み動画をレスポンシブに対応させる方法」WebClips_Design 
「ユーチューブ動画の埋め込みをCSSでレスポンシブ対応する方法」HAM MEDIA MEMO 

やりかた

・動画を貼りたいページで
<div class="movie-wrap">動画の貼り付けコード</div>
とする。

・テンプレのCSSにて

.movie-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

と記載する。

ニートに感謝したい場合はここにクリックを受け付ける用意がありますよ。


ニートに感謝したい場合はここにクリックを受け付ける用意がありますよ。

にほんブログ村 その他日記ブログ ニート日記へ
にほんブログ村

スポンサーリンク

スポンサーリンク

関連記事/広告もある(テスト)

-FC2ブログカスタム, 世界貢献的おやくだち情報

Copyright© ニートブログむらくもの野望 , 2017 All Rights Reserved Powered by STINGER.