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>

1 Answer 1

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();"

2
  • 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, 2012 at 8:21
  • @Athulks It work on me, maybe some details is stoping it in your case, maybe a javascript error...
    – Aristos
    Feb 10, 2012 at 8:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.