Play Squeeze Stream Videos in Modal Windows

Last Updated: Jul 22, 2016 11:10AM PDT
Curious how to play your Squeeze Stream videos in a modal window, like FancyBox, Lightbox, or jQuery Tools'   Overlay? It's simple! 

Here is how you can do it using jQuery Tools' Overlay:

1.     Retrieve the embed code for your video. Watch VIdeo

Example embed code:

<a href="#" onclick="return(false);" rel="videoGUID=69918432z72d1z43c0zb526z20abeaade755&"
    style="display:block;width:640px;height:360px"
    id="69918432z72d1z43c0zb526z20abeaade755" width="640" height="360">Tomatoes</a>
<script type="text/javascript"
    src="http://360.sorensonmedia.com/69918432z72d1z43c0zb526z20abeaade755/embedv2.js"></script>


  
2.     Paste the embed code into the container for the modal window:
    
        <p><code style="display: block; padding: 0.5em 1em; border: 1px solid #ccc;
        background-color: #eee; white-space: pre; font: 0.8em/150% 'Monaco', monospace;"><div class="modal" id="videoModal">
    <a href="#" onclick="return(false);" rel="videoGUID=69918432z72d1z43c0zb526z20abeaade755&"
        style="display:block;width:640px;height:360px"
        id="69918432z72d1z43c0zb526z20abeaade755" width="640" height="360">Tomatoes</a>
    <script type="text/javascript" src="http://360.sorensonmedia.com/69918432z72d1z43c0zb526z20abeaade755/embedv2.js"></script>
</div></code>



3.     Create a link to open the modal window:

        <code style="display: block; padding: 0.5em 1em; border: 1px solid #ccc;
        background-color: #eee; white-space: pre; font: 0.8em/150% 'Monaco', monospace;"><a href="http://videos.sorensonmedia.com/Sorenson+Media/Tomatoes/69918432z72d1z43c0zb526z20abeaade755"
    rel="#videoModal" class="videoModal">Watch Video</a></code>


(Notice that we added the permalink URL to the href attribute of the anchor tag. This is recommended so that if the user has javascript disabled or the modal doesn't open for some reason, they will still be able to watch the video by visiting the permalink page.)


4.     Ensure that you have the proper javascript and css files included (i.e. jquery.js, jquery-tools.js, jquery-tools.css).

5.     Add the following to the page's javascript:
    
     $(function () {
              $('a.videoModal').overlay();
     });




<p>Related information: jQuery Tools' Overlay  (Minimal setup)
squeezesupport@sorensonmedia.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete