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="#YTMODAL" data-ytvideoid="YOUTUBE VIDEO ID NUMBER">LINK TEXT OR IMAGE</a>

**** Modal Window Markup ****
<div id="YTMODAL" 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>

**** INCLUDE JQUERY MIN 1.8.3 ****
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


**** 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){
        	//alert('yes!');
            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
                    $('#YTMODAL .flex-video iframe').remove(); // Remove the video to shut it down
                    $('#YTMODAL .flex-video').append('<div id="feature-video" />'); //Add the div again for next time
                }
            });
        });
    }



*** STYLES ****

/* CSS for jQuery Reveal Plugin Maintained for Foundation. foundation.zurb.com Free to use under the MIT license. http://www.opensource.org/licenses/mit-license.php */
/* Reveal Modals ---------------------- */
.reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0, 0, 0, 0.45); z-index: 40; display: none; top: 0; left: 0; }

.reveal-modal { background: white; visibility: hidden; display: none; top: 100px; left: 50%; margin-left: -260px; width: 520px; position: absolute; z-index: 41; padding: 30px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
.reveal-modal *:first-child { margin-top: 0; }
.reveal-modal *:last-child { margin-bottom: 0; }
.reveal-modal .close-reveal-modal { font-size: 22px; font-size: 2.2rem; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); font-weight: bold; cursor: pointer; }
.reveal-modal.small { width: 30%; margin-left: -15%; }
.reveal-modal.medium { width: 40%; margin-left: -20%; }
.reveal-modal.large { width: 60%; margin-left: -30%; }
.reveal-modal.xlarge { width: 70%; margin-left: -35%; }
.reveal-modal.expand { width: 90%; margin-left: -45%; }
.reveal-modal .row { min-width: 0; margin-bottom: 10px; }

/* Mobile */
@media only screen and (max-width: 767px) { .reveal-modal-bg { position: absolute; }
  .reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge { width: 80%; top: 15px; left: 50%; margin-left: -40%; padding: 20px; height: auto; } }
  /* NOTES Close button entity is &#215;
 Example markup <div id="myModal" class="reveal-modal"> <h2>Awesome. I have it.</h2> <p class="lead">Your couch.  I it's mine.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p> <a class="close-reveal-modal">&#215;</a> </div> */

 /* Video - Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ ---------------------- */
.flex-video { position: relative; padding-top: 25px; padding-bottom: 67.5%; height: 0; margin-bottom: 16px; overflow: hidden; }
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
.flex-video iframe, .flex-video object, .flex-video embed, .flex-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { .flex-video { padding-top: 0; } }