JSFiddle - React, Tailwind, and code Playground

CSS

iframe.video {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
    transition:all 1s linear;
    -o-transition:all 1s linear;
    -moz-transition:all 1s linear;
    -webkit-transition:all 1s linear;
}
iframe.video:hover {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

JavaScript

$(function () {


    var url = "https://www.youtube.com/embed/YjWIAOsndu4";
    var iframe = $("<iframe>", {
        "src": url,
            "class": "video",
            "width": "500px",
            "height": "300px",
            "frameborder": "0",
            "allowfullscreen": true
    });
    $.when($("body").append(iframe))
        .then(function (b) {


        $(window).on("click", function (e) {
            $(b).find(iframe).toggleClass("video")
        });

    });

})