Start & Stop a iframe with php

Question

I want to make 4 channel in my website, but I want to make start for the first channel automatically and after 5 second start the second channel ... etc

code of channel

The Code

window.addEventListener("load", function() {
 
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
iframe[n].style.display = "block";
console.log(n);
if (n === iframes.length -1)
{
 clearInterval(interval); console.log("all iframes loaded") 
 }
 },
5000)
})

.channel1, .channel2, .channel3{
  display:none;
  }

<html>
  <head>
    <script type="text/javascript" src="js.js"></script>
   <link rel="stylesheet" href="css.css">
  </head>
<body>
  
  <iframe width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel1" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel2" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
<iframe class="channel3" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
</body>

</html>

This code doesn't work, I can listen the commutator talk but I cant see the channel why ?

Do you mean change the `src` of `iframe` every five seconds? — guest271314, Apr 10 '16 at 17:26
@guest271314 No, I have 4 iframe I want, to start to first iframe automatically and after 5 seconds the second channel start .... etc — Saad, Apr 10 '16 at 17:28
Yes, can set initial `iframe` 2-4 `src` to `""` at `html`, at five second increments set each `iframe` 2-4 `src` to url — guest271314, Apr 10 '16 at 17:30
How I can make that ? can you give a website Explain that or the code ? — Saad, Apr 10 '16 at 17:31

score 1 · Accepted Answer · answered Apr 10 '16 at 17:43

1

You can set iframe elements 1-4 src to empty string, utilize setInterval to set src of each iframe 1-4 to a url within an array every five seconds until all iframe elements have src set.

window.addEventListener("load", function() {

var urls = ["data:text/plain,b", "data:text/plain,c", "data:text/plain,d"];

var iframes = document.querySelectorAll("iframe");

var n = 0;

var interval = setInterval(function() {
  
  iframes[++n].src = urls[n - 1];
  console.log(n);
  if (n === iframes.length -1) {
    clearInterval(interval);
    console.log("all iframes loaded")
  }
  
}, 5000)

})

<iframe src="data:text/plain,a"></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>

answered Apr 10 '16 at 17:43

guest271314

1
10
82
156

I make this but the channel not start ? :'( – Saad Apr 10 '16 at 17:51
And thaht affiched but after seconds the channel hide and show b, c, d ? Where i make the src of the channel ? – Saad Apr 10 '16 at 17:52
@Saad _"Where i make the src of the channel ?"_ You can place the url that should be set at each `iframe` in an array; see `urls` at stacksnippets. – guest271314 Apr 10 '16 at 17:56
I make our urls in src iframe, all things as right for this moment but after some seconds the channel are hide and showing b,c,d in the page ? why ? – Saad Apr 10 '16 at 17:57
@Saad Not following. The items within `urls` at stacksnippets are for example to demonstrate process; they can be replaced with the actual urls of the items that you want to set as `src` at `iframe` elements – guest271314 Apr 10 '16 at 18:00
Do you have a gmail to send you the code, the see where's the problem ? – Saad Apr 10 '16 at 18:01
@Saad _"Do you have a gmail to send you the code"_ You can post the full code at Question. Though note, actual original Question appears to be _"I want to make 4 channel in my website, but I want to make start for the first channel automatically and after 5 second start the second channel ... etc"_ – guest271314 Apr 10 '16 at 18:02
@Saad Set `src` of `iframe` elements 1-3 at `html` to empty string `""`. Replace contents of `urls` array with urls that should be loaded at `iframe` elements 1-3 . At edited Question all `iframe` elements currently have identical `src` – guest271314 Apr 10 '16 at 18:07
That's good but I have a small problem the first channel doesn't start automatically and The second problem is all the channel are showed, and after that are refresh. I want to see just the first channel and after 5 second I see the second ... etc – Saad Apr 10 '16 at 18:11
@Saad You can set `iframe` elements `style` to `display:none`, the set to `display:block` within `setInterval` after setting `src` – guest271314 Apr 10 '16 at 18:13
I found the solution about start automatically but I want the solution of second problem :'( – Saad Apr 10 '16 at 18:13
See http://stackoverflow.com/questions/3405242/how-can-i-autoplay-a-video-using-the-new-embed-code-style-for-youtube for autoplay; see previous comment set `style=display:none` at `html`, within `setInterval` after setting `src` ; e.g., `iframe[n].style.display = "block"` before `console.log(n)` at stacksnippets – guest271314 Apr 10 '16 at 18:16
I make it display none, but how I make them block after 5 seconds ? this's my question – Saad Apr 10 '16 at 18:21
@Saad _"I make it display none, but how I make them block after 5 seconds ? this's my question"_ `var interval = setInterval(function() { iframes[++n].src = urls[n - 1];iframe[n].style.display = "block"; console.log(n); if (n === iframes.length -1) { clearInterval(interval); console.log("all iframes loaded") } }, 5000)` – guest271314 Apr 10 '16 at 18:23
I edited my post can you see where's the error ? all things work but, I can't see the other channel but I can listen the commutator talk – Saad Apr 10 '16 at 18:31
You are not setting `src` to empty string `""` within `html` or storing urls to set to `src` within an array. At `html` ``, at `js` `var urls = ["https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1",..]` – guest271314 Apr 10 '16 at 18:31
I don't know why, but I always have problems with javascript :'(, I create an array with javascript ? and make the src code into them ? – Saad Apr 10 '16 at 18:34
Like this ? var iframes = [ "https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1", "https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1", "https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" ]; – Saad Apr 10 '16 at 18:35
Use pattern at stacksnippets. The only adjustment needed is what you ahve already done, that is to set `display:none` for `iframe` 1-3 – guest271314 Apr 10 '16 at 18:35
@Saad _"Like this ?"_ Yes, though adjust varibale identifier to `urls`; `iframes` is already defined as `iframe` elements . And also set `` at `html`. Again, use pattern at stacksnippets, set `style.display = "block"` after setting `src` within `setInterval` – guest271314 Apr 10 '16 at 18:35
This ? var iframes = [ '', '<iframe src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1">', '<iframe src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1">' ]; – Saad Apr 10 '16 at 18:38
@Saad No. You had it correct at http://stackoverflow.com/questions/36533012/start-stop-a-iframe-with-php/36533247?noredirect=1#comment60671330_36533247 except for variable name `var urls = ["https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1", "https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1", ..]` – guest271314 Apr 10 '16 at 18:40
Sorry but I'm beginner in English language, All thing is right in my code, but I have a small problem. The problem is : when I click into my file and see them in Mozila, I see just the first channel but after 5 second, I listen the commutator for the second channel but i can't see them why ? – Saad Apr 10 '16 at 18:41
@Saad No worries. Use same `js` at stacksnippets. Substitute urls to videos for `data:..` at `urls` variable – guest271314 Apr 10 '16 at 18:42
Can you edited you comment and give the right code :'( with CSS .. etc, I make all codes without any news :'( – Saad Apr 10 '16 at 18:44

Start & Stop a iframe with php

1 Answers1