How do I refresh an array for the following slider everytime the "case" changes in the code below?

Question

Everytime a new input is given, the array is somehow merged with the old and new values such that the slider displays all the videos from the different cases.

I tried refreshing the array using myUrlArray = []; after every switch case and also tried myUrlArray.length=0 but neither seems to work.

What have i done wrong? Also is there a way to pause the slider if a video is played? i tried using the youtube api <script src="https://www.youtube.com/iframe_api"></script> and fiddled with some code here and there but i can't seem to make that work either.

<input  id="inputIQ" placeholder="Search news. ." type="text" required list= "companylist" name="companyname"/>
  <datalist id="companylist">
    <option value="CNBC">
    <option value="BLOOMBERG">

<input type="submit" value="Submit" onclick="inputIQFunction(); ">
<iframe id="myiFrame" width="100%" height="470px" src="https://www.youtube.com/embed/AG8w0TEZunE?enablejsapi=1"></iframe>



function inputIQFunction() {

var x = document.getElementById("inputIQ").value;
var myUrlArray = [
    ];

switch (x) {
  case  "CNBC":
 myUrlArray =[];
myUrlArray.length = 0;
  myUrlArray = [
        "https://www.youtube.com/embed/y_ziBdLhQBY?enablejsapi=1", 
        "https://www.youtube.com/embed/y_ziBdLhQBY?enablejsapi=1"

    ];
 break;
  case "BLOOMBERG" :
myUrlArray =[];
myUrlArray.length = 0;
    myUrlArray = [
        "https://www.youtube.com/embed/X2LwIiKhczo?enablejsapi=1", 
        "https://www.youtube.com/embed/X2LwIiKhczo?enablejsapi=1"

    ];
 break;
 default:
    text = "No value found";

}

 var u = 1;

    setInterval(function(){
        document.getElementById('myiFrame').setAttribute('src',myUrlArray[u]);
        u++;
        if (u == myUrlArray.length) {u = 0;}
    },5000);
}