JavaScriptでYouTube動画を可変サイズ表示にしてレイアウトをキレイにしよう！
2015/06/23
こんにちは。ゆうやです。
今日はここ『Inside Speech』ではないのですが、僕が運営している他のブログにてYouTube動画を載せようと考えたのですが、その際の横サイズに比例した縦サイズを指定する方法をJavaScriptで考えたのでその方法をご紹介致します。
通常、YouTubeの動画を前回(クリックすると飛びます)の方法で自分のブログなりで公開すると、お客様の環境(PCかスマートフォンか等)によって自動的にサイズを変えてくれます。
とても便利なのですが、僕のサイトの環境ではcssのpaddingが影響してスマートフォンの特定のサイズにした時に右に突き抜けるという状況になりました。
ですので、cssを用いて自分の考えるようにwidth(横幅)を指定したのですがその場合の縦サイズがうまく設定できませんでした。
でJavaScriptを利用して、ページが完全に読み込まれた時にブラウザのサイズによって決まったYouTube動画の横サイズを取得して、横サイズに合わせて縦サイズも指定するスクリプトを作りました。
以下がサンプルです。
html
<script type="text/javascript">window.onload = function(){tubetubeMyFunc('560','315','youtubeid');}</script>
<iframe id="youtubeid" style="width:100%;" src="https://www.youtube.com/embed/～～～"></iframe>
参照したい動画の元の横幅、縦幅、iframeに入れたidを引数にしたtubetubeMyFunc関数をページが完全に読み込まれた時に呼び出します
javascript
function tubetubeMyFunc(initWidth ,initHeight ,id){
//第一引数は動画の元々のwidth、第二引数は動画の元々のHeight、第三引数はiframe内のYouTube動画のid名
var elements = document.getElementById(id);
//ノードを取得
var theWidth = elements.offsetWidth;
//細かく話すと長くなりますが、大ざっぱにYouTube動画の横幅を取得すると考えて下さい
var a = theWidth / initWidth;
//元々の動画と比べて実際の横幅がどれくらいなのか計算する
var b = a * initHeight;
//上で計算した数値を元々の動画の縦幅と掛け合わせて、実際の動画の縦幅を決める
var theHeight = b + 'px';
//実際の動画の縦幅にpxという単位を付ける
elements.style.height = theHeight;
//実際の動画の縦幅を決定(代入)する
}
上記は例を示すための簡単なサンプルなので“なにこれ、できないじゃん”って思われると思うのですが、widthの100%を環境に合わせて変えたりiframeをdivなりで囲んであげてdivのcssでwidthを変えてあげてみて下さい。
これらのソースはご自分のブログ・ホームページに用いて下さって大丈夫ですよ！
ただ“こういう方法があるよ”っていうご紹介される場合は当サイトにリンクを貼って下さいね！
ちょっとこれは特殊な環境じゃないと用いることはないと思いますが、まぁ偶にネットサーフィンをするとレイアウトが変なYouTube動画やYouTubeじゃない動画があるので皆さんのお役に立てれば嬉しいです！
その時は、コメント下さるとすごく嬉しいですよ！
それでは！