スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




【 忘却板/忘れた事を貼れます 】

YouTubeの埋込動画をCSSでレスポンシブにする再生画面の等倍縮小方法

YouTubeの埋め込み動画を等倍縮小させたい!レスポンシブさせたい!

出来るなら、CSSで手軽にサクッとが良い!

そんなやり方腐るほど出てくるのでサクサク、ソースコードを晒しておきます!

レスポンシブにするソースコード


.video{
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTMLのソースコード:
<div class="video">動画のソースを入れる</div>

-----

ちなみに気になる、56.25%というのは、YouTubeの画面サイズHD動画(16:9)を維持するための数字。
「100 / 16 * 9 = 56.25%」こういうこと。

でも、私が困ったのは、100%表示は簡単にできるけど、もし画面の50%のサイズがイイなぁとか我儘を言ったときだった。







メンズフィジーク・2017年MRオリンピアの動画で検証してみましょう。上の動画は素敵に100%で等倍縮小・レスポンシブしてると思います。

PCとかで見るとデカすぎる!ちょっと小さめに出しておきたい気持ちで一杯になる。

それじゃ、上の動画を50%で再現したい。このときどうしたらよかとバイエルン。

色々試したけど、上のCSSいじるだけじゃ無理だったので、さらに囲むしかないorz

最近始めたディアブロ3の紹介トレーラー動画で検証してみます。







ソースコード:
<div style="width:50%; margin:0 auto 0 auto;">
<div class="video">動画のソースを入れる</div>
</div>

これでコンテンツ幅の50%でレスポンシブしてくれます。なんかスッキリしないけど・・・うぅん。
関連記事


【 忘却板/忘れた事を貼れます 】

コメント

非公開コメント
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。