JavaScript 埋め込んだyoutubeの動画のサイズをユーザーが変更できるようにしたい

Question

前提・実現したいこと

ユーザーがフォームに入力したサイズに埋め込んでるyoutubeの動画が変更できるようにしたい。
![

該当のソースコード

<form name="playersize">
        size of the player：width = <input name="sw" type="text" size="10" id="width"> / height = <input name="sh" type="text" size="10" id="height"> (default is 640*360)
        <input type="button" value="change size" onclick="onChangeSizeButtonClick();">
    </form>

    var player_width = '640'
    var player_height = '360'

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: player_height,
          width: player_width,
          videoId: 'UFQEttrn6CQ',
          'origin': location.protocol + '//' + location.hostname + "/"
         
        });
      }

   function onChangeSizeButtonClick() {
        player_width =  document.getElementById("width").value;
        player_height =  document.getElementById("height").value;
     }

問題

この状態だとchange sizeボタンを押しても何の変化もおきません。
どうすればサイズが変わるようになるでしょうか。
もし不可能であれば諦めます。

Answer 1

原因は他の方々が書いておられるように、change sizeボタンを押したあとにinput要素の中身を取得するだけになってしまっており、それを#player要素に設定できていないためです。（ちなみにリサイズのみでしたらnewする必要はないです）

---

参考までにこんなやり方もあります。
https://cdpn.io/mattari-panda/debug/ExgpegL

枠の右下のツマミでサイズを変更出来ます。
JSを一行も書かずに、親要素にCSSのresize:both;を設定して#playerの縦横は100%になっています。

コードはこんな感じです。
※CodepenのEdit画面ではなぜかYoutubeの埋め込みが表示されない場合があるので、動作は上のURLで確認して下さい。
https://codepen.io/mattari-panda/pen/ExgpegL

Comments

[ryo2003]

ありがとうございます！JavaScriptの知識が全くなかったため助かりました。

Answer 2

かなり雑ですが

    size of the player：width = <input type="text" size="10" value="1000" id="sw"> / height = <input type="text" size="10" value="800" id="sh"> (default is 640*360)
    <input type="button" value="change size" onclick="onChangeSizeButtonClick();">
    <div id="sample" style="width:640px;height:360px"></div>

<script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var ytPlayer; var sw=sample.style.width; var sh=sample.style.height; function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player( 'sample', { width: sw, height: sh, videoId: 'M7lc1UVf-VE', } ); } function onChangeSizeButtonClick() { player_width = document.getElementById("sw").value; player_height = document.getElementById("sh").value; sample.style.width=''+player_width+''; sample.style.height=''+player_height+''; } </script>

Comments

[ryo2003]

ありがとうございます！変わるようになりました

Answer 3

変数に入れてるだけでは何もしません。変数に入れただけです。
Playerをnewしたときにしかサイズが指定できないのでしたら、Playerをそのサイズでnewしなおす必要があります。