Thanks Chirag but not sure this will work for all modals. I'm looking for a more universal way to prevent this background click triggering the close of the modal on all of them - not just the ones with that data-option.

 Ok - i think i figured it out by amending the query string with the video ID:
https://codepen.io/jinch/full/eMJRrY?play=vid002&showModal=yes
 
Now just need to figure out how to make it autoplay.

I know this is an older post now but wondering if this can be amended to work with multiple models? 
I'm tasked with creating a video library ~ and each video will need to have there own model with a unique ID. Is it possible to have the query string include a unique ID that can be called on in a URL?
Here is a codePen to demo what I currently have setup (https://codepen.io/jinch/full/eMJRrY?showModal=yes). This works but unfortunately is not specific to call the individual model and instead opens both of them. Also, I would like to get this to autoplay once opened but the code I have commented out calls both to play at the same time.
Any thoughts or suggestions to get this to work?
HTML:
<div class="row small-up-2 medium-up-3 large-up-4">
<div class="column column-block">
<a href="#" class="vidLink" data-open="vid-001">
<img src="../images/Binder-and-Slip-Case-Sets-Archival-Methods-18-feature.jpg" class="thumbnail" alt="">
<h6>Albums and Pages</h6>
</a>
<!--Start Modal Reveal-->
<div class="small reveal openVideo" id="vid-001" data-reveal data-reset-on-close="true">
<h5>Albums and Pages</h5>
<div class="responsive-embed widescreen">
<iframe src="https://www.youtube.com/embed/XQWAeNbXZtI?enablejsapi=1&amp;amp;version=3&amp;amp;playerapi&amp;amp;rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!--End Modal Reveal-->
</div>

              <div class="column column-block">
              <a href="#" class="vidLink" data-open="vid-002">
                <img src="https://placehold.it/330x248" class="thumbnail" alt="">
                <h6>35mm Slide Storage</h6>
              </a>
              <!--Start Modal Reveal-->
              <div class="small reveal openVideo" id="vid-002" data-reveal data-reset-on-close="true">
                <h5>35mm Slide Storage</h5>
                <div class="responsive-embed widescreen">
                  <iframe src="https://www.youtube.com/embed/c361iSyVIeU?enablejsapi=1&version=3&playerapi&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
                </div>          
                <button class="close-button" data-close aria-label="Close reveal" type="button">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <!--End Modal Reveal-->
              &lt;/div&gt;</code></pre>

 
JAVASCRIPT
/*START - OPEN VIDEO MODAL FROM EXTERNAL LINK + AUTOPLAY */

/Opening modal from external link reference (http://foundation.zurb.com/forum/posts/35072-how-to-launch-reveal-modal-from-external-link)/
function getQueryVariable(variable) {
//var videoID =
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}

if (window.location.search) {
var showModal = getQueryVariable('showModal');
if (showModal == 'yes') {
$('.openVideo').foundation('open');
/$('.openVideo iframe')[0].src += "&autoplay=1";/
/$('.openVideo iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '');*/
}
}

/Detect when modal is open and auto play youTube Video */
/$(document).ready(function() {
$('.openVideo').on('open.zf.reveal', function() {
$('.openVideo iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '');
});
});/
/*END - OPEN VIDEO MODAL FROM EXTERNAL LINK + AUTOPLAY */

Ok - so if anyone else is looking for a solution for this ~ you can do it with javascript like so:
 <a id="deepLink1">DEEP LINK 1</a>
<script>
function open_tab(tab_id,panel) {
$("#"+tab_id).foundation("selectTab",$("#"+panel));
}
$("#deepLink1").on('click',function() {
$("#example-tabs").foundation("selectTab",$("#panel1")),
$("#example-tabs-vert").foundation("selectTab",$("#panel3v"))
});
</script>
 
And the Tabs:
<div class="row">
<div class="medium-12 columns">
<ul class="tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<div class="row collapse">
<div class="medium-3 columns">
<ul class="vertical tabs" data-tabs id="example-tabs-vert" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true">
<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
</ul>
</div>
<div class="medium-9 columns">
<div class="tabs-content" data-tabs-content="example-tabs-vert">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
</div>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
</div>
</div>
 

Does anyone have a possible solution? Seams like Im not the only one in need to closing the accordion aspect to these "Responsive Accordion Tabs". Basically trying to find away to close all accordions on mobile and force open the initial tab on destop.
I have tried a few variations of Javascript to do this but nothing seams to work?
$(window).on("load resize",function(){
"use strict";
if (Foundation.MediaQuery.current == ('small')) {
$('ul.accordion li.accordion-item').toggleClass('is-active');
/$("li.accordion-item").foundation('toggle',$(".is-active"));/
}
});
Is there any work around to this?
Thanks
> j

 
Does anyone have a possible solution? Seams like Im not the only one in need to closing the accordion aspect to these "Responsive Accordion Tabs". Basically trying to find away to close all accordions on mobile and force open the initial tab on destop.
I have tried a few variations of Javascript to do this but nothing seams to work?
$(window).on("load resize",function(){
"use strict";
if (Foundation.MediaQuery.current == ('small')) {
$('ul.accordion li.accordion-item').toggleClass('is-active');
/$("li.accordion-item").foundation('toggle',$(".is-active"));/
}
});
 Is there any work around to this?
Thanks
> j

Does anyone have a possible solution? Seams like Im not the only one in need to closing the accordion aspect to these "Responsive Accordion Tabs". Basically trying to find away to close all accordions on mobile and force open the initial tab on destop.
I have tried a few variations of Javascript to do this but nothing seams to work?
$(window).on("load resize",function(){
"use strict";
if (Foundation.MediaQuery.current == ('small')) {
$('ul.accordion li.accordion-item').toggleClass('is-active');
/$("li.accordion-item").foundation('toggle',$(".is-active"));/
}
});
 Is there any work around to this?
Thanks
> j

Awesome tip Igor!Thank you for sharing.Much appreciated.

@Leif
Thanks for sharing your resolution :). I ended up avoiding the animation on my end for the sake of progress but with this I may give it another go.
~  appreciated

Hi Rafi,Sorry for the slow reply. Here are a few examples I pulled that includes some heavy hitters.Amazon (maxed to 1500 wide);Hulu (rocking 1600 wide);Netflix (Doesn't appear to have any max-width - 100%);The trend just seams to be getting larger with higher res monitors become more common place. The latest data from StatCounter (http://gs.statcounter.com/screen-resolution-stats/desktop/worldwide), 1366×768 screens just surpassed 1024×768 as the most popular screen resolution and even that I think may be on the small side. From a designer/developer perspective, we are usually working on more top end equipment so hard for us to gage the standard as we are mostly at the top of that bell curve.