CODEWITHSUNDEEP
javascriptjqueryhtmlvideoyoutube
Geniusknight
Geniusknight

Reputation: 639

Unable to Autoplay Youtube video hiding behind a custom thumnail

Well I am using a custom thumbnail for the youtube video so when it's clicked the actual video shows up but the user has to click again to play the video. I wish to play it automatically when the image is clicked. Here is the markup (fiddle)

<div id="kill" onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img align="left" alt="royal music for cattle by farmer Derek with a trombone goes viral via geniushowto.blogspot.com videos" class="rimp" src="http://bit.ly/1pITz0L" style="cursor: pointer;" title="click to play royal music by Farmer Derek" /></div>

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject" class="video-container" id="thevideo" style="display: none;">
<iframe id="ytvid" allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/qs_-emj1qR4?rel=0&amp;controls=1&amp;showinfo=0&amp;cc_load_policy=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;theme=light&amp;autohide=0&amp;autoplay=0" width="640"></iframe></div>

Here is the script I used to change autoplay from 0 to 1 on clicked.

<script>
$('#kill').click(function() {
$("iframe#ytvid").attr("src", $("iframe#ytvid").attr("src").replace("autoplay=0", "autoplay=1"));});
</script>

but it doesn't work!

I also tried it like this but this time without the dummy autoplay=0 in the Youtube url.(fiddle-2)

<script>
$('#kill').click(function() {
$("#ytvid iframe").attr('src', $("#ytvid iframe", parent).attr('src') + '?autoplay=1');});
</script>

but unfortunately this one also failed. Am I doing something wrong here ? a solution will be very helpful. Thanks in advance.

Upvotes: 1

Views: 320

Answers (2)

Harsh
Harsh

Reputation: 1072

Use this

jsfiddle http://jsfiddle.net/harshdand/7s6p1a6d/5/

$('#kill').click(function() {
    var src = $("#ytvid").attr('src');
    $("#ytvid").attr('src',src+'autoplay=1');
 });

Upvotes: 1

Scott Mitchell
Scott Mitchell

Reputation: 698

Looks like you were just missing the rel=0 param

var source = $("#ytvid").attr('src') + "?rel=0&autoplay=1";

FORKED FROM YOUR 2nd Example - http://jsfiddle.net/mvdL6q1j/

Upvotes: 2

Related Questions