www.webdeveloper.com
Results 1 to 1 of 1

Thread: on click play youtube video

  1. #1
    Join Date
    Dec 2009
    Posts
    51

    on click play youtube video

    I found a script that allows to plays the youtube video on one click. The reason for this is so I can have a custom image on top of the youtube video.

    When the user clicks on the video (which is an image placed on top of the video) the image disappears and the youtube video starts to play...

    Here is the code

    HTML and javascript

    HTML Code:
    <div id="vid1">
    	<a href="javascript:void(0);" onclick="play();">
              <img id="thumb" onClick="document.getElementById('thumb').style.display='none'" src="video.jpg" />
            </a>
    
        <div id="ytapiplayer"></div>
        <script type="text/javascript">
          
          var atts = { id: "myytplayer" };
          swfobject.embedSWF("http://www.youtube.com/video",
                             "ytapiplayer", "640", "480", "8", null, null, params, atts);
       
        </script>
    		
       </div>

    Javascript:

    Code:
        function updateHTML(elmId, value) {
              document.getElementById(elmId).innerHTML = value;
            }
    
            function onYouTubePlayerReady(playerId) {
              ytplayer = document.getElementById("myytplayer");
              setInterval(updateytplayerInfo, 250);
              updateytplayerInfo();
              ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
              ytplayer.addEventListener("onError", "onPlayerError");
            }
    
            function play() {
              if (ytplayer) {
                ytplayer.playVideo();
              }
            }

    How can I add two videos on one page? I can only get one to work on a page and not two (or more)


    I tried this code

    Code:
            
    function updateHTML(elmId, value) {
              document.getElementById(elmId).innerHTML = value;
            }
    
            function onYouTubePlayerReady(playerId) {
              ytplayer2 = document.getElementById("myytplayer2");
              setInterval(updateytplayerInfo, 250);
              updateytplayerInfo();
              ytplayer2.addEventListener("onStateChange", "onytplayerStateChange");
              ytplayer2.addEventListener("onError", "onPlayerError");
            }
    
            function play() {
              if (ytplayer2) {
                ytplayer2.playVideo();
              }
            }


    I have also changed the id in the HTML/javascript shown above...
    I can get both videos to work separately but not together. By this I mean when I click on video 1 the image disappears and the video plays...
    But if I click on video 2, the image disappears and I have to click again after the image disappears to play the video - it doesn't play on the one click...

    Hope this makes sense.

    Can anyone help?
    Last edited by pc_mac; 05-21-2012 at 10:25 AM.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles