JSFiddle - React, Tailwind, and code Playground

by soboaz

HTML

<iframe id="iframe" width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>

<button id="button">change</button>

CSS

#iframe {background:#000;}

JavaScript

var youtubeBaseEmbedURL = '//www.youtube.com/embed/';
var exampleYoutubeID1   = 'p2mLwZn5Smk';
var exampleYoutubeID2   = 'sNUNB6CMnE8';

$(document).ready(function() {
    
    $('#iframe')
        .attr('src',youtubeBaseEmbedURL+exampleYoutubeID1).data('youtubeID',exampleYoutubeID1);
    
    $('#button')
        .on('click', function() {
            $('#iframe').fadeTo(500,0.2, function() {
            var youtubeID = $('#iframe').data('youtubeID') == exampleYoutubeID1 ? exampleYoutubeID2 : exampleYoutubeID1;
            $('#iframe')
                .attr('src',youtubeBaseEmbedURL+youtubeID)
                .data('youtubeID',youtubeID);

            $('#iframe').fadeTo(2000,1);
        });        });
});