1

So basically i got an unlimited number of different types of divs with lists in them and they all include an a tag with a youtube video... When i press on it gets played on a big iframe...

<div class="the box">
<ul class="first">
<li class="second">Taylor Swift - Shake It Off</li>
<li class="third">
<a href="//www.youtube.com/embed/nfWlot6h_JM?autoplay=1" target="iframeu"><img src="bilder/play.png" alt="play" id="knapp6" width="40" height="40"></a>
</li>
</ul>
</div>
<div class="the box">
<ul class="first">
<li class="second">PSY - GANGNAM STYLE(강남스타일) M/V</li>
<li class="third">
<a href="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" target="iframeu">
<img src="bilder/play.png" alt="play" id="knapp6" width="40" height="40"></a></li>
</ul>
</div>

 <div id ="player"> 
  <iframe  height = "195" width = "320" frameborder = "0" autoplay 
   src="//www.youtube.com/embed/msSc7Mv0QHY" name= "iframeu" id = "mainFrame" > </iframe>
 </div>

So my question is, is it possible for me to be able to play the next song after the first one is finished? Can I do this without having to call the youtube api with javascript/jquery and iframes only? enter image description here

  • for this my friend, you need the playlist of videos, i see you already have autoplay added in your URL, videos in playlist and autoplay in URL will give you result you are seeking. it will auto play next video on current video ends. – Talha Habib May 06 '17 at 12:50
  • How do you mean by the playlist of the videos? Can you give me an example? –  May 06 '17 at 12:54
  • [this](https://www.youtube.com/watch?v=tvTRZJ-4EyI&list=PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI) is an example video link of playlist of 200 videos, when one stops next video is auto played if the auto play option is checked. in our case if autoplay=1 is added in url. – Talha Habib May 06 '17 at 12:56
  • have a look at the youtube api. It isnt possible with iframes... – Jonas Wilms May 06 '17 at 12:58
  • But how should i use the api to play next video after the other when ive created the playlist by myself? @Jonasw –  May 06 '17 at 13:03
  • @FeelLikeAnSir first migrate your code to the API, then open a new question and well look further... – Jonas Wilms May 06 '17 at 13:05

1 Answers1

2

You need to use the youtube iframe api to be able to access the player events and be able to execute code when a video ends. Check this answer for more details.

The rest is just plain js/jquery for keeping track of which video is playing and telling the player to load that video. I created an example of it here: https://codepen.io/ahmed-wagdi/pen/xdWvBL

Basically you keep track of the current video using a current_video variable. When a link is clicked you set that variable to the index of the clicked element, when the video ends you just increment it. Just make sure to handle the cases where you're playing the last video, i didnt do that in my example

Community
  • 1
  • 1
Ahmed Wagdi
  • 934
  • 5
  • 9
  • Thanks for you answer, I took a look on the code and it worked for me when I had the ul with the data-videos printed out when i start my page.. However since I am using the youtube api to search for the videos it didn't work for me later when i pressed on the button, do you know how i can solve this problem? –  May 13 '17 at 15:47
  • So as you can see on the picture i search for the video it has the data-video correct but of some reason when i press on it, nothing happens –  May 13 '17 at 15:52
  • @StupidJack I don't see any picture but i think you're problem can be solved by changing the click function to look like this `$(document).on('click', '[data-video]', function(){ ....` If you're interested in an explanation then check this link : http://stackoverflow.com/a/18144022/6022945 – Ahmed Wagdi May 13 '17 at 16:46
  • yeah i read the article too, it works now when i click on it however even if the data-video is unique for each button wherever i press the same video is still getting played (the one in the middle of my search result) –  May 14 '17 at 13:04
  • @AhmedWagdi how can I start automatically on the next video. not static. if you can see here my example as well. https://www.ighomall.com/index.php?route=tmdvideo/tmdallvideo&videocategory_id=1 – Mujahid Bhoraniya Mar 19 '21 at 04:24