title: Script for changing iframe src doesn't work
body: <p>I'm trying to make a script that when I select an option it suppose to change the iframe source link, but it doesn't change it.
  The conditions I want to accomplish is:</p>
  <ul>
  <li>If I select option 1, it changes the src link to the Youtube video (also default video).</li>
  <li>If I select option 2, it changes the src link to the Dailymotion video.</li>
  <li>If I select option 3, it changes the src link to the Vimeo video.</li>
  <li>The default switch ('Select an option' in HTML) is the same src link as Youtube video.</li>
  </ul>
  <p>What should I do?</p>
  <p>Source code:
  <div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let serverSelect = document.querySelector('#server-select');
  let videoSrc = document.querySelector('#video');
  
  function switchServer() {
      switch(serverSelect.options.selectedIndex) {
          case 1:
              videoSrc.src = 'https://www.youtube.com/embed/6stlCkUDG_s';
              videoSrc.contentWindow.location.reload();
              break;
          case 2:
              videoSrc.src = 'https://www.dailymotion.com/embed/video/x7q1u6a?';
              videoSrc.contentWindow.location.reload();
              break;
          case 3:
              videoSrc.src = 'https://player.vimeo.com/video/460077377?h=768fa4a8b6';
              videoSrc.contentWindow.location.reload();
              break;
          default:
              videoSrc.src = 'https://www.youtube.com/embed/6stlCkUDG_s';
              videoSrc.contentWindow.location.reload();
              break;
      }
  }
  if (serverSelect.options.selectedIndex.onclick) {
      switchServer()
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Bootstrap style (ignore)--&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt;
  
      &lt;div class="container mt-4 w-75"&gt;
          &lt;div class="input-group mb-3"&gt;
          
              &lt;label class="input-group-text" for="inputGroupSelect01"&gt;Server&lt;/label&gt;
              
              &lt;!--Select input with the following options (#server-select)--&gt;
              &lt;select id="server-select" class="form-select" id="inputGroupSelect01"&gt;
                  &lt;option hidden selected&gt;Select an option&lt;/option&gt;
                  &lt;option value="1"&gt;Option 1&lt;/option&gt;
                  &lt;option value="2"&gt;Option 2&lt;/option&gt;
                  &lt;option value="3"&gt;Option 3&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
              &lt;div class="video-wrap"&gt;
              &lt;div class="video-container"&gt;
                  &lt;center&gt;
                      &lt;!--Iframe video player (#server)--&gt;
  &lt;iframe id="video" src="https://www.youtube.com/embed/6stlCkUDG_s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
                  &lt;/center&gt;
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Result in <a href="https://jsfiddle.net/dxb6a2se/" rel="nofollow noreferrer"><strong>JSFiddle.net</strong></a></p>