0

Many desktop software (VLC, MPC) and have an option to 'zoom in' , 'crop black bars', or crop to a specific aspect ratio. How can we do this in Fullscreen on Youtube or other flash Video sites?

I am the viewer, NOT the video's creator/publisher.

iOS Can do this (double tap to zoom, which removes black bars, zoom depth not configurable).

afaik, Desktop computers (and android devices), cannot do this on the fly. The only 'workaround' I've found is F11 and zooming of the entire web page - basically a fake full screen and zooming the web page beyond the screen size.

Use Case: watching 4:3 flash videos from the web on a widescreen monitor.

Looking for all creative solutions, (if necessary, accessing YouTube using non-browsers to accomplish zooming)

2
  • 1
    Moyea Youtube Player allows you to play the video without a browser and has some support for saving. Minitube also does it - did you actually spend any time researching this?
    – Dave
    Oct 2, 2012 at 8:47
  • These are interesting browser replacements, but I don't see a function to zoom-in on either of them, for the purpose of removing black bars.
    – cloneman
    Oct 2, 2012 at 9:45

2 Answers 2

2

Watch it in Firefox - install Greasemonkey and add this script. It allows you to toggle between ratio's (4:3 and 16:9)

The code is updated from this (which is for both Firefox and Chrome)

// ==UserScript==
// @name           Youtube Aspect Remake
// @description    Adds buttons to toggle 4:3 and 16:9 aspect ratios on youtube, probs to the great work of scupizzaboy who mades this script. I've just changed the buttons to make them more adapt at the new youtube design. Original Script: http://userscripts.org/scripts/show/101165
// @namespace      NoXPhasma
// @include        http://youtube.*/*
// @include        http://*.youtube.*/*
// @include        https://youtube.*/*
// @include        https://*.youtube.*/*
// @version        9
// @date           2012-15-03
// ==/UserScript==

function setAspectWide()
{
    document = unsafeWindow.document;
    var player = document.getElementById('movie_player');
    var flashvars = player.getAttribute('flashvars').split('&');
    for (var i = 0; i < flashvars.length; i++)
    {
        if (flashvars[i].indexOf('keywords') == 0)
        {
            var keywords = flashvars[i].split('=')[1].split(',');
            var found = false;
            for (var j = 0; j < keywords.length; j++)
            {
                if (decodeURIComponent(keywords[j]) == 'yt:stretch=4:3')
                {
                    keywords[j] = encodeURIComponent('yt:stretch=16:9');
                    found = true;
                }
            }
            if (found == false)
            {
                keywords.push(encodeURIComponent('yt:stretch=16:9'));
            }
            flashvars[i] = 'keywords=' + keywords.join(',');
        }
    }
    player.setAttribute('flashvars', flashvars.join('&'));
    player.src += "";
}

function setAspectNarrow()
{
    document = unsafeWindow.document;
    var player = document.getElementById('movie_player');
    var flashvars = player.getAttribute('flashvars').split('&');
    for (var i = 0; i < flashvars.length; i++)
    {
        if (flashvars[i].indexOf('keywords') == 0)
        {
            var keywords = flashvars[i].split('=')[1].split(',');
            var found = false;
            for (var j = 0; j < keywords.length; j++)
            {
                if (decodeURIComponent(keywords[j]) == 'yt:stretch=16:9')
                {
                    keywords[j] = encodeURIComponent('yt:stretch=4:3');
                    found = true;
                }
            }
            if (found == false)
            {
                keywords.push(encodeURIComponent('yt:stretch=4:3'));
            }
            flashvars[i] = 'keywords=' + keywords.join(',');
        }
    }
    player.setAttribute('flashvars', flashvars.join('&'));
    player.src += "";
}

function fixWindowBox()
{
    document = unsafeWindow.document;
    var player = document.getElementById('movie_player');
    var flashvars = player.getAttribute('flashvars').split('&');
    for (var i = 0; i < flashvars.length; i++)
    {
        if (flashvars[i].indexOf('keywords') == 0)
        {
            var keywords = flashvars[i].split('=')[1].split(',');
            var found = false;
            for (var j = 0; j < keywords.length; j++)
            {
                if (decodeURIComponent(keywords[j]) == 'yt:crop=16:9')
                {
                    found = true;
                }
            }
            if (found == false)
            {
                keywords.push(encodeURIComponent('yt:crop=16:9'));
            }
            flashvars[i] = 'keywords=' + keywords.join(',');
        }
    }
    player.setAttribute('flashvars', flashvars.join('&'));
    player.src += "";
}

var target = document.getElementById('watch-actions');  

var group = document.createElement('span');
group.setAttribute("class", "yt-uix-button-group");
target.appendChild(group);

var button = document.createElement('input');
button.setAttribute("class", "start yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip");
button.setAttribute("style", 'width:17px;height:2.77em;padding:0px 6px');
button.setAttribute("value", '4:3');
button.setAttribute("title", "Stretch to 4:3");
button.addEventListener('click', setAspectNarrow, false);
group.appendChild(button);

var button = document.createElement('input');
button.setAttribute("class", "middle yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip");
button.setAttribute("style", 'width:24px;height:2.77em;padding:0px 6px');
button.setAttribute("value", '16:9');
button.setAttribute("title", "Stretch to 16:9");
button.addEventListener('click', setAspectWide, false);
group.appendChild(button);

var button = document.createElement('input');
button.setAttribute("class", "end yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip");
button.setAttribute("style", 'width:24px;height:2.77em;padding:0px 6px');
button.setAttribute("value", 'Zoom');
button.setAttribute("title", "Fix Windowboxing");
button.addEventListener('click', fixWindowBox, false);
group.appendChild(button);
1
  • Interesting. I had a different version of this script that didn't have the zoom/fix letterbox. I'm going to try this out over the next week; although it doesn't allow fine-zooming, so it's an all or nothing approach.
    – cloneman
    Oct 2, 2012 at 10:19
-1
// Youtube has made some changes and old code does not work. This update fixes that. //
// Youtube Aspect GreaseMonkey JavaScript; updated: 19-SEP-2014 (ACS) //
// ==UserScript==
// @name           Youtube Aspect
// @description    Adds buttons to toggle 4:3 and 16:9 aspect ratios on youtube
// @namespace      scupizzaboy - "fixed" by Kocayine
// @include        http://youtube.*/*
// @include        http://*.youtube.*/*
// @include        https://youtube.*/*
// @include        https://*.youtube.*/*
// @grant          none
// ==/UserScript==

function setAspectWide()
{
    var player = document.getElementById('movie_player');
    var flashvars = player.getAttribute('flashvars').split('&');
    for (var i = 0; i < flashvars.length; i++)
    {
        if (flashvars[i].indexOf('keywords') == 0)
        {
            var keywords = flashvars[i].split('=')[1].split(',');
            var found = false;
            for (var j = 0; j < keywords.length; j++)
            {
                if (decodeURIComponent(keywords[j]) == 'yt:stretch=4:3')
                {
                    keywords[j] = encodeURIComponent('yt:stretch=16:9');
                    found = true;
                }
            }
            if (found == false)
            {
                keywords.push(encodeURIComponent('yt:stretch=16:9'));
            }
            flashvars[i] = 'keywords=' + keywords.join(',');
        }
    }
    player.setAttribute('flashvars', flashvars.join('&'));
    player.parentNode.innerHTML = player.parentNode.innerHTML;
}

function setAspectNarrow()
{
    var player = document.getElementById('movie_player');
    var flashvars = player.getAttribute('flashvars').split('&');
    for (var i = 0; i < flashvars.length; i++)
    {
        if (flashvars[i].indexOf('keywords') == 0)
        {
            var keywords = flashvars[i].split('=')[1].split(',');
            var found = false;
            for (var j = 0; j < keywords.length; j++)
            {
                if (decodeURIComponent(keywords[j]) == 'yt:stretch=16:9')
                {
                    keywords[j] = encodeURIComponent('yt:stretch=4:3');
                    found = true;
                }
            }
            if (found == false)
            {
                keywords.push(encodeURIComponent('yt:stretch=4:3'));
            }
            flashvars[i] = 'keywords=' + keywords.join(',');
        }
    }
    player.setAttribute('flashvars', flashvars.join('&'));
    player.parentNode.innerHTML = player.parentNode.innerHTML;
}

var target = document.getElementById('watch8-secondary-actions');

var button = document.createElement('input');  
button.name = 'setAspectNarrow';  
button.setAttribute("class", "start yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip");
button.type = 'button';  
button.value = '4:3';  
button.addEventListener('click', setAspectNarrow, false);
if (target != null) target.appendChild(button);

var button = document.createElement('input');  
button.name = 'setAspectWide';  
button.setAttribute("class", "start yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip");
button.type = 'button';  
button.value = '16:9';  
button.addEventListener('click', setAspectWide, false);
if (target != null) target.appendChild(button);
3
  • While this code block may answer the question, it would be best if you could provide some explanation for why it does so.
    – DavidPostill
    Sep 14, 2014 at 6:32
  • YouTube added an extra button ("...More") and these Aspect Ratio buttons have to be moved beyond that button. Today, fixed an error in the first 2 comment lines to make it work & simplified a few lines. Sep 19, 2014 at 23:42
  • Thank you so much. Can you add 5:4 please as well?
    – user399948
    Dec 18, 2014 at 5:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .