How to auto play video on link click?

Question

YouTube

Hello everyone, there was a need to make auto playback of a video from YouTube or just a video added through the html player. I decided to just pass the desired parameter to the code for the video, but I don’t know how to do it. Here is a sample code

<div class="sl">
    	
    	<div class="imgbox" onclick='divdf.style.display="block"'><img src="img/003.jpg" width="640" height="360"></div>
        <div class="buttom" id="divdf">
        	<iframe width="560" height="315" src="http://www.youtube.com/embed/CgBcloPdJjg" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
< a id="nextbutton" href="" >Переключить</a>

Here I have a picture, it serves as a background for the video, by clicking on which a block with a video player appears.

<div class="imgbox" onclick='divdf.style.display="block"'><img src="img/003.jpg" width="640" height="360"></div>

It is necessary that by clicking on it, not only a div with the video appears, but also the parameter ?rel=0&autoplay=1 is added to the iframe in the link.
Here www.youtube.com/embed/CgBcloPdJjg ?rel=0&autoplay=1
clicking on the "Switch" link stopped the video from playing.
I would be very grateful if you could help me solve this problem. Itself in java script-e is very bad.

Answer 1

Your example video does not open, should there definitely be a Russian letter c?
As for the task, I don’t see anything complicated, any freelance exchange will do it for you for a nominal fee.

Answer 2

I suggest:
1. change the link so that it is working.
2. When clicking on the picture, hide the picture itself and open the iframe block. you can make a very successful transition using css animation, for example.
3. Then use js to search for your iframe and change its scr attribute: scr = scr + '?rel....'. However, it is not certain that the video will start playing automatically. If anything - see item 4.
4. As for the stop - read the js API for YouTube, it is. There is even such parameter enablejsapi
https://developers.google.com/youtube/js_api_refer...
I'm sure that you won't need to change the attribute. You can do everything using the API, read the link.
That's exactly the hint. Writing code is work.

Answer 3

@iiil found a solution, well, maybe a little crutch, but still my own. But I ran into a new problem.

<div class="slide">
       
       <div id="sales1"><div class="imgbox" onclick="buy2()"><img src="http://cs312728.vk.me/v312728349/81f5/5oSO-UZdqDQ.jpg" width="640" height="360"></div></div>
  
  		
      <script>
            var sales_div = document.getElementById("sales1");
            function buy2(){
            sales1.innerHTML = '<div class="imgbox"><iframe width="640" height="360" src="http://www.youtube.com/embed/CgBcloPdJjg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></div>';
            }
            function cancel(){
            sales1.innerHTML = '<div class="imgbox" onclick="buy2()"><img src="http://cs312728.vk.me/v312728349/81f5/5oSO-UZdqDQ.jpg" width="640" height="360"></div>';
            }
            </script>
      </div>
      
      
      <div class="slide">
        <div id="sales2"><div class="imgbox" onclick="buy()"><img src="http://cs312728.vk.me/v312728349/81fd/rNsbgmc8tEs.jpg" width="640" height="360"></div></div>
  
  		
      <script>
            var sales_div = document.getElementById("sales2");
            function buy(){
            sales2.innerHTML = '<div class="imgbox"><iframe width="640" height="360" src="http://www.youtube.com/embed/CgBcloPdJjg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></div>';
            }
            function cancel(){
            sales2.innerHTML = '<div class="imgbox" onclick="buy()"><img src="http://cs312728.vk.me/v312728349/81fd/rNsbgmc8tEs.jpg" width="640" height="360"></div>';
            }
            </script>
      </div>

Since I need to do it all in a slide, I made a slide and pushed the code in. And now when I click on the switch to the next slider, my video stops. But that's when you add the next slider. Then the first sliders with video after the start of playback by pressing the button, the next slider does not stop for no magician, what could be the problem in the code itself.