adesignl · February 22, 2013 15:14 · Feb 25, 2013 · Feb 25, 2013 · Feb 25, 2013 · Feb 25, 2013
diff --git a/You-Tube-Modal b/You-Tube-Modal
@@ -6,10 +6,10 @@ 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>
+<a class="feature-modal-btn" href="#YTMODAL" data-ytvideoid="YOUTUBE VIDEO ID NUMBER">LINK TEXT OR IMAGE</a>
 
 **** Modal Window Markup ****
-<div id="ID OF MODAL" class="reveal-modal">
+<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>
@@ -60,8 +60,8 @@ You might have to make
                     });
                 },
                 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
+                    $('#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
                 }
             });
         });

diff --git a/You-Tube-Modal b/You-Tube-Modal
@@ -30,7 +30,7 @@ You might have to make
 
     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');

diff --git a/You-Tube-Modal b/You-Tube-Modal
@@ -16,6 +16,9 @@ You might have to make
 <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 ****
 

diff --git a/You-Tube-Modal b/You-Tube-Modal
@@ -62,4 +62,37 @@ You might have to make
                 }
             });
         });
-    }
+    }
+
+
+
+*** 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; } }
diff --git a/You-Tube-Modal b/You-Tube-Modal
@@ -10,7 +10,9 @@ You might have to make
 
 **** Modal Window Markup ****
 <div id="ID OF MODAL" class="reveal-modal">
-    <div id="feature-video">[this div will be converted to an iframe]</div>
+    <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>
 
@@ -40,12 +42,23 @@ You might have to make
                         //height: '315',
                         width: '800',
                         videoId: ytVideoID, //ytVideoID is the variable that holds my youtube video ID
-                        rel: 0
+                        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').remove(); // Remove the video to shut it down
-                    $(modal).append('<div id="feature-video" />'); //Add the div again for next time
+                    $('#feature-video iframe').remove(); // Remove the video to shut it down
+                    //$(modal).append('<div id="feature-video" />'); //Add the div again for next time
                 }
             });
         });

diff --git a/You-Tube-Modal b/You-Tube-Modal
@@ -0,0 +1,52 @@
+****
+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 id="feature-video">[this div will be converted to an iframe]</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
+                        rel: 0
+                    });
+                },
+                close: function() { //When closing the modal is initiated
+                    $('#feature-video').remove(); // Remove the video to shut it down
+                    $(modal).append('<div id="feature-video" />'); //Add the div again for next time
+                }
+            });
+        });
+    }