Reputation: 433
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="<iframe src="http://player.vimeo.com/video/135481337?api=1&amp;player_id=player1&amp;wmode=opaque" width="500" frameborder="0" id="player1" class="vimeo" height="281"></iframe>" 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.
Upvotes: 1
Views: 480