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

JavaScript
1

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.

Code

<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>
2

So… you tell me.

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

1 Like
3

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.

4

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?

5

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?

6

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

7

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

8

Okay - go ahead and look for it then.

1 Like
9

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

10

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.

16

I got it!!!

<td class="player-demo-group-options">
  <div class="player-demo-option-row">
    <label for="aspectRatio">Aspect ratio:</label>
    <select class="kd-button kd-menubutton kd-select player-demo-tooltip-zindex" id="aspectRatio" name="aspectRatio" onchange="setPlayer(document.getElementById('playerWidth').value, document.getElementById('playerHeight').textContent)">
      <option value="widescreen">16x9</option>
      <option value="standard">4x3</option>
    </select>
  </div>
  <br>
  <div class="player-demo-option-row">
    <label for="playerWidth">Dimensions:</label>
    <input id="playerWidth" type="text" class="player-demo-text-input" size="2" value="720" oninput="setPlayer(document.getElementById('playerWidth').value, document.getElementById('playerHeight').textContent)">&nbsp;x&nbsp;<span id="playerHeight">405</span>&nbsp;&nbsp;&nbsp;
  </div>
</td>

function setPlayer(width, height) {
   var ratio;
   var asratio = document.getElementById('aspectRatio').value;
   if (asratio == 'standard') {
      ratio = 3 / 4;
      document.getElementById('playerHeight').textContent = width * ratio;
   } else {
      ratio = 9 / 16;
      document.getElementById('playerHeight').textContent = width * ratio;
   }
}
2 Likes
17

Well done. Do you see how two of the lines are identical? Duplication like that is a big problem that plagues many programs. The code tends to be a lot easier to understand and work with, when that duplication is removed.

Those can both be removed from the if statement, with only one of them needing to be placed after the if statement.

1 Like
18

There’s 2 different ratios there though, those can be combined?

      ratio = 3 / 4;
      document.getElementById('playerHeight').textContent = width * ratio;

      ratio = 9 / 16;
      document.getElementById('playerHeight').textContent = width * ratio;
19

I’m not instructing to move the ratio calculation. That remains in the if statement.

20

Here is the recommended improvement.

function setPlayer(width, height) {
   var asratio = document.getElementById('aspectRatio').value;
   var ratio;
   if (asratio == 'standard') {
      ratio = 3 / 4;
   } else {
      ratio = 9 / 16;
   }
   document.getElementById('playerHeight').textContent = width * ratio;
}

Notice now that the if statement is much simpler, making it crystal clear exactly what it does.

A possible further improvement is to move the textContent line to a separate function, so that the function call can be made from each part of the if statement.

function setHeight(height) {
   document.getElementById('playerHeight').textContent = height;
}
function setPlayer(width, height) {
   var asratio = document.getElementById('aspectRatio').value;
   if (asratio == 'standard') {
      setHeight(width * 3 / 4);
   } else {
      setHeight(width * 9 / 16);
   }
}

You can do it either way, but at minimum make the if statement simpler by moving the text duplicate textContent part out of it.

1 Like
21

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.