I have a vimeo video that loads when the user clicks on a div.
<div class="vimeobox" ID="vimeo-ID-goes-here"></div>
Here is my javascript:
$(".vimeobox").click(function() {
var iframe = "<iframe />";
var id = $(this).attr('id'); //
var url = "http://player.vimeo.com/video/" + id + "?title=0&byline=0&portrait=0&autoplay=1";
var width = 700;
var height = 394;
var frameborder = 0;
$(iframe, {
name: 'videoframe',
id: 'videoframe',
src: url,
width: width,
height: height,
frameborder: frameborder,
type: 'text/html',
allowfullscreen: true,
webkitAllowFullScreen: true,
mozallowfullscreen: true
}).css({'position': 'absolute', 'top': '0', 'left': '0'}).appendTo(this);
$(this).find('img').fadeOut(function() { $(this).remove();
});
});
The vimeo player appears when the div is clicked on (removing the preview image)...but the video does not autoplay.
I don't know what the issue is. I am using near-identical code for a youtube player (minus the url variable) and it autoplays?
Just change the &
in your url by ?
.