CODEWITHSUNDEEP
javascriptjqueryhtml
Chams Agouni
Chams Agouni

Reputation: 87

Replace video in embedded iframe

How can I replace a video embedded in an iframe using JavaScript or jQuery?

My HTML is:

  <iframe src="https://openload.co/embed/7Cq9AdeLtL0/" allowfullscreen="true" 
  id="bigframe" frameborder="0"></iframe>
  <a data-link="https://openload.co/embed/5xTolN_ejRI/">openload</a>

And the other video source should be in the <a> tag so when I click the word "openload", it will change the video source to the second source and another think I need to do this in multiple posts with a variable video

Upvotes: 2

Views: 2464

Answers (3)

Hamza Shah
Hamza Shah

Reputation: 1

const iFrame = document.querySelectorAll("iframe");
// console.log(iFrame)
iFrame.forEach((item, index) => {
  let src = item.src;
  const newItem = document.createElement("video");
  newItem.style = "width:640px; height:360px";
  newItem.src = src;
  item.parentNode.replaceChild(newItem, iFrame[index]);
  newItem.setAttribute("class", "iframe-video-tag-" + index);
  newItem.setAttribute("controls", "true");
  let videoTag = document.getElementsByClassName("iframe-video-tag-" + index);
  videoTag.src = src;
});

Upvotes: 0

programtreasures
programtreasures

Reputation: 4298

It is batter to play video using html video tag instead iframe .You can do it with jquery like below

html

<a data-link="https://openload.co/embed/5xTolN_ejRI/" href="#">Video 1</a>  
<a data-link="https://openload.co/embed/5xTolN_ejRI/"  href="#">Video 2</a>  

<video width="320" height="240" controls>
  <source src="https://openload.co/embed/5xTolN_ejRI" type="video/mp4">  
Your browser does not support the video tag.
</video>

JS

$(document).ready(function(){
  // set video srs 
  $('a').click(function(){
    $("video").html('<source src="'+$(this).data('link')+'"></source>' );
  });   
});

Upvotes: 2

zer00ne
zer00ne

Reputation: 43880

You don't need any JavaScript.

  1. Give the iframe a name ex. <iframe src='about:blank' name='vid'....
  2. Next, give each link a target attribute withe the value of the iframe's name. ex. <a href='path/to/video.mp4' target='vid'...

Demo

Doesn't work here, go to this Plunker for a working demo 

<a href='http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4' target='vid'>1</a>

<a href='http://media6000.dropshots.com/photos/1381926/20170326/005610.mp4' target='vid'>2</a>

<a href='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' target='vid'>3</a>


<iframe src='about:blank' name='vid' width='320' height='180'></iframe>

Upvotes: 2

Related Questions