This is the video

 <iframe id="vt" width="420" autoplay="false" height="345" src=".mp4?v=1&c=IWSAsset&k=2&d=72990B68305E4FDFEE95B69A879131BCD6D7111452E48A17C03F8342D660D5A451EBC1DEC2A827C9&b=RTdG" frameborder="0" allowfullscreen></iframe> 

I want to do stop or pause on it, is that possible? want to stick on iframe only

/

any function in js/jquery for the same?

This is the video

 <iframe id="vt" width="420" autoplay="false" height="345" src="http://cache4.asset-cache/xd/468140002.mp4?v=1&c=IWSAsset&k=2&d=72990B68305E4FDFEE95B69A879131BCD6D7111452E48A17C03F8342D660D5A451EBC1DEC2A827C9&b=RTdG" frameborder="0" allowfullscreen></iframe> 

I want to do stop or pause on it, is that possible? want to stick on iframe only

http://jsfiddle/karimkhan/2Lgxk5h3/7/

any function in js/jquery for the same?

• javascript
• jquery
• html
• iframe

Share Improve this question Follow asked Jun 24, 2015 at 11:23 nlpernlper 2,40788 gold badges3030 silver badges3737 bronze badges 1

• You cannot acces the iframe with script when it is not on the same domain. (search for Cross site scripting XSS). I once tried to do this by triggering a space key event on the iFrame (which should make the video stop) but I could not get it to work and gave up. – Michiel Commented Jun 24, 2015 at 12:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Yes you can access your video from iframe, but this will work only if the frame source is on the same domain. If it is from a different domain, cross-site-scripting (XSS) protection will kick in.

I suppose you are playing videos from your domain, (embedded iframe url domain most be the same with the page domain).

Testing:

go here: http://cache4.asset-cache/

and run this code in console:

var video = undefined;
//define iframe in html
ifrm = document.createElement("IFRAME"); 
ifrm.setAttribute("src", "http://cache4.asset-cache/xd/468140002.mp4?v=1&c=IWSAsset&k=2&d=72990B68305E4FDFEE95B69A879131BCD6D7111452E48A17C03F8342D660D5A451EBC1DEC2A827C9&b=RTdG"); 
ifrm.setAttribute("id", "vt");
ifrm.setAttribute("width","420");
ifrm.setAttribute("autoplay","false"); 
ifrm.setAttribute("height","345");
document.body.appendChild(ifrm); 

//iframe load event
ifrm.onload = function() {
    var btnPlay = document.createElement("BUTTON");
    btnPlay.setAttribute("onclick", "play();");
    var t1 = document.createTextNode("PLAY ME");       
    btnPlay.appendChild(t1);                               
    document.body.appendChild(btnPlay);

    var btnPause = document.createElement("BUTTON");        
    btnPause.setAttribute("onclick", "pause();");
    var t2 = document.createTextNode("PAUSE ME");      
    btnPause.appendChild(t2);                              
    document.body.appendChild(btnPause);

    video = document.getElementById("vt").contentWindow.document.body.getElementsByTagName('video')[0];
}


//play stop methods
function play()
{
  if (video != undefined)
    video.play();
  return false;
}

function pause()
{
  if (video != undefined)
    video.pause();
  return false;
}

The conclusion if your iframe source is different than your domain you cannot control video from frame. Above is how to control the video when cross site scripting does not afect you.

I used below code for play/pause videos inside the iframe:

Play:

var frames = document.getElementsByTagName('iframe');var t=1;
for (var i in frames){
  $(frames[i]).contents().find('video')[0].play();
  if(t===frames.length)break;
                  t++;
}

and

Pause:

var frames = document.getElementsByTagName('iframe');var t=1;
for (var i in frames){
  $(frames[i]).contents().find('video')[0].pause();
  if(t===frames.length)break;
                  t++;
}

I am giving you the solution for what i did to stop, play pause a video in a video gallery using this html and JS code.

    <script>
      var slideIndexVid = 1;
      showSlidesVid(slideIndexVid);
      
      function plusSlidesVid(n) {

        
        showSlidesVid(slideIndexVid += n);
      }
      
      function currentSlideVid(n) {
        showSlidesVid(slideIndexVid = n);
      }
      
      function showSlidesVid(n) {
        var i;
        var slidesVid = document.getElementsByClassName("vid-slides");
        var dotsVid = document.getElementsByClassName("dot-vid");

       
        $('#vidS1')[0].contentWindow.postMessage('{"event":"mand","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS2')[0].contentWindow.postMessage('{"event":"mand","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS3')[0].contentWindow.postMessage('{"event":"mand","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS4')[0].contentWindow.postMessage('{"event":"mand","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS5')[0].contentWindow.postMessage('{"event":"mand","func":"' + 'pauseVideo' + '","args":""}', '*');
        $('#vidS6')[0].contentWindow.postMessage('{"event":"mand","func":"' + 'pauseVideo' + '","args":""}', '*');
        
        
        if (n > slidesVid.length) {slideIndexVid = 1}
        if (n < 1) {slideIndexVid = slidesVid.length}
        for (i = 0; i < slidesVid.length; i++) {
          slidesVid[i].style.display = "none";
        }
        for (i = 0; i < dotsVid.length; i++) {
            dotsVid[i].className = dotsVid[i].className.replace(" active-vid", "");
        }
        
        slidesVid[slideIndexVid-1].style.display = "block";
        dotsVid[slideIndexVid-1].className += " active-vid";      
      }  
    </script>

<div class="video-container">
      <h2>Our Demo Sessions</h2>
      <div class="vid-slides">
        <iframe id="vidS1" src="https://www.youtube./embed/PGW3lgbGFc8?rel=0&&enablejsapi=1" frameborder="0" enablejsapi allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe id="vidS2" src="https://www.youtube./embed/oolJWcOhHCw?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe id="vidS3" src="https://www.youtube./embed/9MO1aY1xC80?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe id="vidS4" src="https://www.youtube./embed/q5jEY92Amgw?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe  id="vidS5" src="https://www.youtube./embed/VLUl3NgQY1A?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe id="vidS6" src="https://www.youtube./embed/rw8GhqZaNHE?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>

      <a class="prev-video" onclick="plusSlidesVid(-1)"><</a>
      <a class="next-video" onclick="plusSlidesVid(1)">></a>
      
      <div style="text-align:center">
        <span class="dot-vid" onclick="currentSlideVid(1)"></span> 
        <span class="dot-vid" onclick="currentSlideVid(2)"></span> 
        <span class="dot-vid" onclick="currentSlideVid(3)"></span>
        <span class="dot-vid" onclick="currentSlideVid(4)"></span> 
        <span class="dot-vid" onclick="currentSlideVid(5)"></span> 
        <span class="dot-vid" onclick="currentSlideVid(6)"></span>
      </div> 
    </div>

I faced the same issue, I was trying to pause the videos from my local/one domain (S3 server) in iframe, after spending the hours. I get to know that if we are getting videos from local or one domain than we use video tag , it gives more controls and I have used iframe for youtube videos

here the code, here the default control is pause

            <video width='200' height='180' src="" style='position:absolute;width:100%;height:100%;left:0' controls>
            </video>

To enable auto play

        <video width='200' height='180' src="" style='position:absolute;width:100%;height:100%;left:0' controls autoplay>
        </video>

This will save your time and give you more controls