埋め込み動画のサイズをwindow幅に合わせる

今はやりの「レスポンスWEB」に対応してるテンプレートでサイトを作ってみたけど『動画だけ』が指定サイズのままで、完全に "はみ出してる"状態なのが、どーしても気に入らない (-＿-;)



mmm...　これはどーしたらいいもんか…




で、一応、ダメ元で検索。
そしたら見つけました！(゜∀゜
　↓　↓　↓
「YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法」


このサイトを参考に早速cssを追加！

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

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

続いて、埋め込みコードをdivで挟みます。

<div class="video-container">
<iframe width="560" height="315" src="●●" frameborder="0" allowfullscreen></iframe>
</div>

これで完了!!!

おかげさまで、ブラウザ幅を伸ばしても縮めても、それに合わせて伸縮してくださいます！(^▽^)







おかげさまで(2) スマホでもご覧の通り、しっかりブラウザ幅（機種幅）に収まっております！嗚呼...嬉しい（TーT）

早速他のページの動画も変更！
joomla!を始めてからずっとお世話になっている「AllVideos」さんも、このDIVタグで挟む！でOKでした(^_-)
▼一部ダメな機種もあり。　残念!!!
ただ…　MLBのサイトから持ってきたコードが何度やっても（いろいろ調整しても）ダメでした。出来るやつと出来ないやつがありましたが、何が原因かは不明ですが…　どうしても載せたい動画は、YouTubeの方から探してUPしました(^-^)

あと、動画で気になる…といえば、ブログでしょうかね。今使わせていただいてる「livedoorブログ」ですが、埋め込みコードで動画を表示させてますが、スマホ版でははみ出て全体の邪魔になっています。

で、試しにcssを追加し、DIVで囲ってみましたが、ダメでした(-＿-;)
MLBの動画だからかもしれませんが…　あとでYouTubeも試してみて、それでもダメだったあら、livedoorに問い合わせてみようかな…


でもでも、とりあえず

joomla!で対応できてひと安心！

ま、この心配は「レスポンスWEB」に対応したサイトだけですが…　これからどんどん増えてくるかもしれませんので、一応忘れないようにしようと思います。

それにしても…こんな複雑で難しいテンプレートを提供してくれる業者って、本当ありがたいですね(ノ_<。)　今後は、見つけたらどんどんリニューアルしていこうと思います！
※賛否あるようですが、スマホで見れるなら万々歳です。
というか、正直、超～助かります！！





これで…思い切って「スマホ用に別で作って切り替え表示させてるサイト」を削除しても大丈夫かな？？
せっかく作ったのにもったいないけど…（この辺がなんだか思い切れないところ；）
ま、javascriptを外せばいいだけなんで、いつでも出来るんですけどね。