スキップしてメイン コンテンツに移動

YouTubeの埋め込みサイズをレスポンシブにする


特にYouTube動画に限らないのですが
iframeやdivを使った特定の領域をレスポンシブ(?)にするJavaScriptを作ってみました。

スマートフォンで縦横画面を切り替えたり
PCブラウザでウインドウサイズを変更したときにも
その領域は自動的にリサイズされます。

縦長画面でも横長画面でも常にエリア全体が画面内に収まるように
あと横画面の時に少し隙間を持たせるようにしていますなんとなく

まずJavaScript本体のソースです。

↓ここから
function a(z) {
    z.style.width = 100 + '%';
    var w = parseInt(z.offsetWidth
            || document.defaultView.getComputedStyle(z, '').width);
    var h = document.documentElement.clientHeight;
    if (w <= h) {
        // 縦長画面用。4:3サイズで表示
        h = w * 3 / 4;
    } else {
        // 横長画面用。4:3サイズで表示
        h = h * 0.95; // ちょっと隙間を入れてみた
        w = h * 4 / 3;
    }
    z.style.width = w + 'px';
    z.style.height = h + 'px';
}

function r() {
    var e = document.getElementsByClassName("mv");
    for (var i = 0; i < e.length; i++) {
        a(e[i]);
    }
    a(document.getElementById("mv"));
}

r();
r();// スクロールバーを出してからさらに調整するためもう一度
window.onresize = r;
↑ここまで


次にHTMLです。
classまたはidに"mv"を指定した領域がレスポンシブになります。
こんな感じです。
<iframe class="mv" style="width: 100%;" src="//www.youtube.com/embed/ほにゃらら" frameborder="0" allowfullscreen></iframe>



IE9未満に対応させるにはHTMLのヘッダ部分にこれが必要そうです。
<!--[if lt IE 9]>
    <script type="text/javascript" src="/html5jp/dom/getElementsByClassName.js"></script>
<![endif]-->

このコードはご自由に使っていただいて構いませんが
動作確認はIE8とChromeとFirefoxと持ってるスマホで簡単にしか行えていません。
その他iPhoneなどではどうなるか不明です。すみません。



ところで今回はこちらのツールを使わせていただきまして
ソースにきれいな色を付けることができました。ありがとうございます。

 

記事一覧

もっと見る