3

i have a situation i want to add a vimeo player in to my site,and above the player i need to show an image. when image is clicked i want vimeo player to play. till now i have done a little in which i managed to get vimeo player on page on image click.but now i need to mannually play it. any one tell me how i can autoplay it on image click? i have already done some code nd i am pasting it here

<script type="text/javascript">

    function imgClick() {
        var video = '<iframe src="http://player.vimeo.com/video/36302746?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""> </iframe>';
        document.getElementById("vPlayer").innerHTML = video;
    }

</script>
None
  • 5,582
  • 21
  • 85
  • 170

1 Answers1

10

The iframe is not just text to add it on innerHtml, you need to add it as element. So ether create it as element, ether add it as tag all ready on your html code, and just change the src and visibility of it. Here is how you can create it onfly.

function imgClick() {    
        var ifrm = document.createElement("IFRAME"); 
           ifrm.setAttribute("src", "http://player.vimeo.com/video/36302746?title=0&amp;byline=0&amp;portrait=0"); 
           ifrm.style.width = "400px"; 
           ifrm.style.height = "224px"; 
           // add rest of your values
           ifrm.frameborder = 0;
           document.getElementById("vPlayer").appendChild(ifrm); 
        return false;        
}

I test this code and working. Call it from your image as onclick="return imgClick();"

Aristos
  • 66,005
  • 16
  • 114
  • 150
  • sorry but this is not working in my case,vimeo player is not coming under image. for your reference i am embedding my whole code – None Feb 10 '12 at 08:21
  • @Athulks It work on me, maybe some details is stoping it in your case, maybe a javascript error... – Aristos Feb 10 '12 at 08:23