Script for changing iframe src doesn't work

August 21, 2022

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:

If I select option 1, it changes the src link to the Youtube video (also default video).
If I select option 2, it changes the src link to the Dailymotion video.
If I select option 3, it changes the src link to the Vimeo video.
The default switch (‘Select an option’ in HTML) is the same src link as Youtube video.

What should I do?

Source 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()
}

<!--Bootstrap style (ignore)-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div class="container mt-4 w-75">
        <div class="input-group mb-3">
        
            <label class="input-group-text" for="inputGroupSelect01">Server</label>
            
            <!--Select input with the following options (#server-select)-->
            <select id="server-select" class="form-select" id="inputGroupSelect01">
                <option hidden selected>Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
    </div>
            <div class="video-wrap">
            <div class="video-container">
                <center>
                    <!--Iframe video player (#server)-->
<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></iframe>
                </center>
            </div>
        </div>

Result in JSFiddle.net

>Solution :

You’ve never added a change listener, so the code never detect any changes.

Try adding

serverSelect.addEventListener('change', switchServer)

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;
    }
}

serverSelect.addEventListener('change', switchServer)

<!--Bootstrap style (ignore)-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div class="container mt-4 w-75">
        <div class="input-group mb-3">
        
            <label class="input-group-text" for="inputGroupSelect01">Server</label>
            
            <!--Select input with the following options (#server-select)-->
            <select id="server-select" class="form-select" id="inputGroupSelect01">
                <option hidden selected>Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
    </div>
            <div class="video-wrap">
            <div class="video-container">
                <center>
                    <!--Iframe video player (#server)-->
<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></iframe>
                </center>
            </div>
        </div>