987550 - videos on video.disney.co.jp are wider than the screen in Firefox on Android

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect)

Description

[Hallvord R. M. Steen [:hallvors]]

Site: http://video.disney.co.jp/sp/
videos on video.disney.co.jp are wider than the screen in Firefox on Android

:: Steps To Reproduce

Videos appear and play, but they don't fit the screen width in Firefox like they do in Android stock browser.

:: Expected Result

d'oh

:: Actual Result

d'ah

:: Additional Information

Software Version: 28
Reporter's User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0

Comment 1

[Hallvord R. M. Steen [:hallvors]]

The player is an IFRAME with YouTube content and hard-coded height/width:

<iframe src="https://www.youtube.com/embed/3pMDepnFV1c?rel=0&amp;autoplay=0&amp;loop=0&amp;disablekb=0&amp;egm=0&amp;enablejsapi=1&amp;fs=1&amp;hd=1&amp;showsearch=0&amp;showinfo=0&amp;Iv_load_policy=0&amp;html5=True&amp;origin=http%3A%2F%2Fvideo.disney.co.jp" title="YouTube video player" allowfullscreen="1" class="stage" id="player" frameborder="0" height="360" width="640"></iframe>

I'd like to know how that height/width is set.. Probably this code:

function adJust() {
    var $allVideos = $("iframe[src^='http://www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

    // Figure out and save aspect ratio for each video
    $allVideos.each(function() {

        $(this)
        .data('aspectRatio', this.height / this.width)

        // and remove the hard coded width/height
        .removeAttr('height')
        .removeAttr('width');

    });

    // When the window is resized
    // (You'll probably want to debounce this)
    $(window).resize(function() {

        var newWidth = $fluidEl.width();

        // Resize all videos according to their own aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
            .width(newWidth-24)
            .height((newWidth-24) * $el.data('aspectRatio'));

        });

    // Kick off one resize to fix all videos on page load
    }).resize();
}

Comment 2

[Hallvord R. M. Steen [:hallvors]]

So, the bug is that 

    var $allVideos = $("iframe[src^='http://www.youtube.com']"),

should be 

    var $allVideos = $("iframe[src^='https://www.youtube.com']"),

- youtube uses https now.

Comment 3

[Hallvord R. M. Steen [:hallvors]]

This isn't really specific to Firefox, so I'm not sure if it's worth our time to reach out to them. As we've analysed it we might as well fire off an E-mail or tweet though.

It seems YouTube sometimes loads the content over http, sometimes over https. It may depend on stuff like whether you're logged in to a Google / YT account or not. If the video page happens to load over http, Disney's resizing will work - if not, it won't.

Comment 4

[Hallvord R. M. Steen [:hallvors]]

The best fix for this issue is to edit http://video.disney.co.jp/common/sp/js/adjust.js to change this line:

    var $allVideos = $("iframe[src^='http://www.youtube.com']"),

into this:

    var $allVideos = $("iframe[src*='://www.youtube.com']"),

This should work both when YouTube decides to load over HTTP and over HTTPS.

Comment 5

[Hallvord R. M. Steen [:hallvors]]

The videos on video.disney.co.jp sometimes fail to adapt to the screen width. When they are wider than the screen, it's hard to watch them.

Comment 6

[Karl Dubost💡 :karlcow]

The site has been stopped.
http://www.disney.co.jp/news/20140930_01.html


> 今後も皆さまにお楽しみいただけるコンテンツを充実していく予定です。
> 引き続きご愛顧いただけますよう、よろしくお願い申し上げます。 

Now people needs to access YouTube directly

> Disney.jpから別のサイトへ移動します
> 
> ソーシャルメディアサイトは、13歳以上の方がご利用になれます。
> 以下のリンク先のページは、Disney.jpサイト外のページです。
> リンク先のウェブサイトのご利用にあたっては、各ウェブサイトのご利用条件、
> 個人情報保護方針等をご確認ください。

http://m.youtube.com/#/user/disneyjp