videojs youtube plugin MEDIA_ERR_SRC_NOT_SUPPORTED when updating src dynamically

Question

So I have created a simple video playlist which works great with videos that I am hosting but I get the above error when loading a youtube video src. Onclick I am grabbing the url from a data attr and using the video.js src function to load the new video.

video settings:

<video id="fatigue-1" 
class="video-js vjs-default-skin"
controls 
preload="auto" 
width="100%" 
height="100%" 
data-setup='{"techOrder":["youtube", "html5"], "src": "https://www.youtube.com/watch?v=SS4F1U5FuNM"}' >
</video>

update src function:

updateSrc: function(e) {
    var videoURL = $(e.currentTarget).attr("data-url"),
        videoType = $(e.currentTarget).attr("data-type"),
        videoID = this.$el.find(".video-js").attr("id"),
        videoPlayer = videojs(videoID);

    videoPlayer.src({type: videoType, src: videoURL});
}

I'm not sure that the youtube plugin works with the src function as when my method runs it updates the src outside the data-setup attr and in the docs it states that the url should be defined inside. Also the video id changes to show the html5 api is being used rather than the youtube one. See below:

<video id="fatigue-1_html5_api"
class="vjs-tech"
preload="auto"
data-setup="{"techOrder":["youtube", "html5";], "src": "https://www.youtube.com/watch?v=SS4F1U5FuNM";}"
src="//www.youtube-nocookie.com/embed/yP41vpFOKVA">
</video>

Wondering if anyone has a working example of dynamically loading youtube videos with videojs or can see any glaring mistake I am making?

Answer 1

In html:-

    <video
    id="my-player"
    class="video-js vjs-default-skin"
    controls
    preload="auto"
    width="1260"
   >
    </video> 

• do not provide any in-line data setup or src

In js;-

const player= videojs('my-player',{
            preload:'auto',
            controls:true,
            autoplay:true,
            techOrder:['html5','youtube']
    })
    player.src({type:'video/youtube',src:videoUrl})
    
    player.load();
    player.play();