What's the javascript code on here that will get this to work?

I’m trying to get this to work without the use of update player size, that can be removed.

How it works is, you put numbers in and the height is supposed to change instantaneously.

https://developers.google.com/youtube/youtube_player_demo

Code
https://jsfiddle.net/k3c9r8qm/

<td class="player-demo-group-options">
          <div class="player-demo-option-row">
            <label for="aspectRatio">Aspect ratio:</label>
            <devsite-select class="kd-button kd-menubutton player-demo-tooltip-zindex" menu-position="below"><select class="" id="aspectRatio" name="aspectRatio" onchange="setPlayerHeight(document.getElementById('aspectRatio').value, document.getElementById('playerWidth').value); return false;" is-upgraded="">
              <option value="widescreen">16x9</option>
              <option value="standard">4x3</option>
            </select><div class="devsite-select"><label id="aspectRatio-label" style="display:none;">Select an option</label><button type="button" class="devsite-select-toggle" id="aspectRatio-button" aria-haspopup="listbox" aria-labelledby="aspectRatio-label aspectRatio-button">16x9</button><ul class="devsite-select-list" tabindex="-1" role="listbox" aria-expanded="false" scrollbars="" aria-labelledby="aspectRatio-button" style="left: 0px;" aria-activedescendant="aspectRatio-0"><li role="option" id="aspectRatio-0" class="devsite-select-item" data-index="0" aria-selected="false" aria-label="16x9">16x9</li><li role="option" id="aspectRatio-1" class="devsite-select-item" data-index="1" aria-selected="false" aria-label="4x3">4x3</li></ul></div></devsite-select>
          </div>
          <div class="player-demo-option-row">
            <label for="playerWidth">Dimensions:</label>
            <input id="playerWidth" type="text" class="player-demo-text-input" size="4" value="720" onkeyup="setPlayerHeight(document.getElementById('aspectRatio').value, document.getElementById('playerWidth').value); return false;">&nbsp;x&nbsp;<span id="playerHeight">405</span>&nbsp;&nbsp;&nbsp;<button class="button-blue button" onclick="setPlayerSize(document.getElementById('playerWidth').value, document.getElementById('playerHeight').innerHTML); return false;">Update player size</button>
          </div>
        </td>

So… you tell me.

What do you need the javascript to do?
How do you think you might go about that?

1 Like

When you put a number into the width area, the numbers on the height side should be changing.

That’s how it works on here.
https://developers.google.com/youtube/youtube_player_demo

It seems that you need to multiply the width by the ratio to come up with an appropriate height.

Based on your previous involvement here, I’m pretty sure that you are capable of doing this. Why don’t you give it a go?

Is the javascript code I am looking for inside here?

view-source:https://developers.google.com/youtube/youtube_player_demo

And I would add that to here?

https://jsfiddle.net/k3c9r8qm/

It might be, but it’s far easier to create the JS code yourself.

But, if the code is already there, then all I would need to do is look for it.

Okay - go ahead and look for it then.

1 Like

You said that because you know I’m not going to be able to find it.

Quite the opposite actually. I want you to find it so that you can get it working as a solution for you.

Negative attitudes tend to prevent progress. I know that you can do better than that.

This is all the javascript on the page.

That doesn’t seem like the right code.

              <script type="application/json" analytics>[{"gaid": "UA-24532603-1", "dimensions": {"dimension1": "Signed In", "dimension6": "en", "dimension11": false, "dimension4": "YouTube IFrame Player API", "dimension5": "en", "dimension8": null, "dimension3": false}, "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}}]</script>
<script type="application/json" gtm>{"parameters": {"freeTrialEligibleUser": "False", "internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "projectName": "YouTube IFrame Player API", "scriptsafe": null, "signedIn": "True", "tenant": "developers"}}</script>
          </devsite-analytics>
            <script>
    (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i;
    t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0];
    E.parentNode.insertBefore(t,E);})(window, document, 'script',
    'https://www.gstatic.com/devrel-devsite/prod/va2f579f943e40687d02fe75a771878e054c901286ea550f8e49c5efb402dac68/js/app_loader.js', '[1,"en",null,"/js/devsite_app.js","https://www.gstatic.com/devrel-devsite/prod/va2f579f943e40687d02fe75a771878e054c901286ea550f8e49c5efb402dac68","https://www.gstatic.com/devrel-devsite/prod/va2f579f943e40687d02fe75a771878e054c901286ea550f8e49c5efb402dac68/developers","https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","/_static/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/va2f579f943e40687d02fe75a771878e054c901286ea550f8e49c5efb402dac68/developers/images/favicon.png","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700|Material+Icons"],1]')
  </script>

I just found this.

https://developers.google.com/youtube/js/as3_demo_functions.js

// Player size … setPlayerHeight and setPlayerSize

/**

  • The ‘setPlayerHeight’ function calculates the height of the player
  • for the given aspect ratio and width, which are specified in the demo.
  • This ensures that the player dimensions are a legitimate aspect ratio,
  • which should make videos look nicer.
  • @param {string} aspectRatio Mandatory The aspect ratio of the player.
  • Valid values are 'standard' (4x3) and 'widescreen' (16x9).
    
  • @param {number} playerWidth Mandatory The pixel-width of the player.
    */
    function setPlayerHeight(aspectRatio, playerWidth) {
    // XSS sanitizer – make sure player width is just numbers.
    if (xssSanitizer(‘Width’, playerWidth, ‘digits’)) {
    if (aspectRatio == ‘widescreen’) {
    updateHTML(‘playerHeight’, ((playerWidth * 9) / 16));
    } else if (aspectRatio == ‘standard’) {
    updateHTML(‘playerHeight’, ((playerWidth * 3) / 4));
    }
    }
    }