JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="modal fade video-dialog" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div id="videoDialogPlayer" class="vidflex"></div>
                            <div id="videoDialogPlayer2" class="vidflex"></div>
                            <div id="videoDialogPlayer3" class="vidflex"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>

JavaScript

var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        (function () {
            var el = document.createElement('script');
            el.src = "//www.youtube.com/iframe_api";
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(el, s);

            var videoDialogPlayer;
            var videoDialogPlayer2;
            var videoDialogPlayer3;

            window.onYouTubeIframeAPIReady = function () {
                videoDialogPlayer = new YT.Player('videoDialogPlayer', {
                    height: '390',
                    width: '640',
                    videoId: 'mRBaAYdJuLY',
                });
                videoDialogPlayer2 = new YT.Player('videoDialogPlayer2', {
                    height: '390',
                    width: '640',
                    videoId: 'UvRs60UV6YI',
                });

                videoDialogPlayer3 = new YT.Player('videoDialogPlayer3', {
                    height: '390',
                    width: '640',
                    videoId: 'RXT_bj_zDAI',
                });
            }
        }());