0

I'd like to play my iframe video with my #play custom button. I've put the iframe in a bootstrap responsive embed div. Am I looking at the right contents in the iframe?

JS:

$(document).ready(function ($) {
    $('#play').click(function () {        //custom button id
      $('iframe').contents().find('#wistia_video').get(0).play();
      $('.row.grey, .row.header').hide();   //hides elements over htevideo
    });
});

HTML:

<div class="embed-responsive embed-responsive-4by3">
    <iframe src="//fast.wistia.net/embed/iframe/b4nym2w6dx" allowtransparency="true" 
frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" 
allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen 
msallowfullscreen width="595" height="253"></iframe>     
</div>

Iframe iports it's classes and ids dynamically, so I cannot post it here.

1 Answers1

0

Yes It's a Cross Domain problem. You better use Wistia API

I've made a working JSFiddle for you.

HTML

<script src="//fast.wistia.net/static/iframe-api-v1.js"></script>
<div class="embed-responsive embed-responsive-4by3">
<iframe id="my_iframe" src="//fast.wistia.net/embed/iframe/b4nym2w6dx" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="595" height="253"></iframe>
</div>
<div id="play">Play</div>

JS:

$(document).ready(function ($) {
wistiaEmbed = document.getElementById("my_iframe").wistiaApi;

 $('#play').click(function () { //custom button id
     wistiaEmbed.play();
     $('.row.grey, .row.header').hide();
 });
});
Alexander Arutinyants
  • 1,619
  • 2
  • 23
  • 49
  • Keep up the good work! Definitely did the job. Can you briefly explain how you appended on the element id, how does this thing work exactly? –  Dec 23 '14 at 10:08
  • Sorry, I probably didn't get your question. You should read Wistia API carefully. there are a lot of examples. If you kindly extend your question and wrte more particullary on every detail you want to know, i will try to do my best to answer. – Alexander Arutinyants Dec 23 '14 at 11:40