Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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)

share|improve this question
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 '12 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 '12 at 9:45

2 Answers 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);
share|improve this answer
    
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 '12 at 10:19
// 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);
share|improve this answer
    
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 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. –  A.Chandrasekaran Sep 19 at 23:42
    
Thank you so much. Can you add 5:4 please as well? –  jake Dec 18 at 5:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.