Reveal Modal Player for youtube videos

You-Tube-Modal

****
This Script Set was designed to use the latest version of foundation Reveal Modal
By Zurb. You can easily use the modal seperatly from the other framework.
You might have to make 
****


**** Link ****
<a class="feature-modal-btn" href="#ID OF MODAL" data-ytvideoid="YOUTUBE VIDEO ID NUMBER">LINK TEXT OR IMAGE</a>

**** Modal Window Markup ****
<div id="ID OF MODAL" class="reveal-modal">
    <div class="flex-video widescreen">
        <div id="feature-video">[this div will be converted to an iframe]</div>
    </div>
<span class="close-reveal-modal">&times;</span>
</div>


**** Script ****

// YOUTUBE Video Modal Window
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubePlayerAPIReady() { //Important to set up the the modal inside this function, not the other way around
        $('.feature-modal-btn').on('click', function(e){
        
            e.preventDefault();
            var $btn = $(this);
            var modal = $btn.attr('href');
            var ytVideoID = $btn.data('ytvideoid');

            var player;

            $(modal).reveal({
                animation: 'fade',
                opened: function() { //After the modal is done opening
                    player = new YT.Player('feature-video', { //Add the player
                        //height: '315',
                        width: '800',
                        videoId: ytVideoID, //ytVideoID is the variable that holds my youtube video ID
                        playerVars: {
                            rel            : 0,
                            theme          : 'light',
                            showinfo       : 0,
                            showsearch     : 0,
                            autoplay       : 1,
                            autohide       : 1,
                            modestbranding : 1
                        },
                        events: {
                            
                        }
                    });
                },
                close: function() { //When closing the modal is initiated
                    $('#feature-video iframe').remove(); // Remove the video to shut it down
                    //$(modal).append('<div id="feature-video" />'); //Add the div again for next time
                }
            });
        });
    }