1

I am using squarespace (in retrospect a poor idea because of the difficulty of customizing with code), and I need to be able to identify the vimeo iframe within this div so I can use it in some javascript calls. However, the javascript does not recognize any such iframe element existing. I feel like either it's impossible to identify the iframe as it is currently shoved into the div (by squarespace), or I am missing a selector. Any help or pointers would be appreciated.

Here's the iframe I am trying to embed into squarespace:

<iframe src="http://player.vimeo.com/video/135481337?api=1&player_id=player1&wmode=opaque" width="500" frameborder="0" id="player1" class="vimeo" height="281"></iframe>

Here's the embedded iframe: 

<div class="sqs-video-wrapper" data-load="false" data-html="&lt;iframe src=&quot;http://player.vimeo.com/video/135481337?api=1&amp;amp;player_id=player1&amp;amp;wmode=opaque&quot; width=&quot;500&quot; frameborder=&quot;0&quot; id=&quot;player1&quot; class=&quot;vimeo&quot; height=&quot;281&quot;&gt;&lt;/iframe&gt;" data-provider-name="" >
    </div>

And here is my javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>   
    <script type="text/javascript">

        jQuery(document).ready(function() {

            alert("this alert is working");

            // Enable the API on each Vimeo video
            jQuery('iframe.vimeo').each(function(){
                Froogaloop(this).addEvent('ready', ready);
            });

            function ready(playerID){
                Froogaloop(playerID).addEvent('play', play(playerID));
                Froogaloop(playerID).addEvent('finish', onFinish);
            }

            function play(playerID){
                alert(playerID + " is playing!");
            }

            function onFinish() {
                document.write('<style>.yui3-lightbox2-content {display: none !important;}</style>');
            }

        });
    </script>

I've taken this from a working example of this api as seen in this link.

Alexander Bolinsky
  • 403
  • 4
  • 13
  • could you set the `data-load` & `data-html` to nothing ("") and then append your iframe to the `.sqs-video-wrapper` div? – perennial_ Aug 07 '15 at 18:21
  • If the `iframe` is dynamically added by Squarespace, you could try a [`MutationObserver`](https://developer.mozilla.org/en/docs/Web/API/MutationObserver). – Sebastian Simon Aug 07 '15 at 18:29
  • @WookieCoder By appending the iframe do you mean like so: – Alexander Bolinsky Aug 07 '15 at 19:57
  • @Xufox Would you be able to give me an example of how I might use a MutationObserver in this context? I've never used them before. – Alexander Bolinsky Aug 07 '15 at 20:00
  • Right after the DOM is loaded: `new MutationObserver(function(){if(document.querySelector('iframe.vimeo')){alert('The iframe exists now!');}}).observe(document.documentElement,{childList:true,attributes:true,subtree:true});` — this would be a minimal example of a mutation observer that alerts “The iframe exists now!” every time when the document changes and the iframe exists. – Sebastian Simon Aug 07 '15 at 20:05
  • @Xufox That definitely alerted me many times that the iframe exists! Thank you. So that means I should be able to reference the iframe with the selector 'iframe.vimeo' correct? – Alexander Bolinsky Aug 07 '15 at 20:11
  • It depends… you can also use `#player1`. I need to know about other possible iframes that use the same class, etc… I’m not sure whether the iframe that you want to operate on is the only one. – Sebastian Simon Aug 07 '15 at 20:14
  • This is the only iframe. Code inside jQuery('iframe.vimeo').each(function(){ is not being called. Why would that be the case, if I got a response from your suggestion using MutationObserver? – Alexander Bolinsky Aug 07 '15 at 21:07

0 Answers0