Unable to Autoplay Youtube video hiding behind a custom thumnail - javascript

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&controls=1&showinfo=0&cc_load_policy=0&iv_load_policy=3&modestbranding=1&theme=light&autohide=0&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.

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/

Use this
jsfiddle http://jsfiddle.net/harshdand/7s6p1a6d/5/
$('#kill').click(function() {
var src = $("#ytvid").attr('src');
$("#ytvid").attr('src',src+'autoplay=1');
});

Related

trigger a click after click element

I have a div with an img and an iframe video. I want to play the video just after click over the image. (its not valid change url for ux purposes)
My js code is not working as expected. The youtube video does not start.
$(".youtube-video img").click(function (e) {
$(".youtube-video .video").trigger('click');
ev.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="youtube-video">
<img src="http://i.ytimg.com/vi/<?php echo $video1 ?>/maxresdefault.jpg">
<div class="video">
<iframe frameborder="0" src="https://www.youtube.com/embed/<?php echo $video1 ?>" allowfullscreen="" style=""></iframe>
</div>
</div>
Use player.playVideo() with JQuery.
So it will be like that in javascript: document.querySelector("iframe").contentDocument.getElementsByClassName("html5-video-player")[0].playVideo()
The html5-video-player class is the class which contain the function playerVideo and we just get the iframe Dom with contentDocument. And do not forget to add ?enablejsapi=1&version=3&playerapiid=ytplayer at the end of the iframe's link.
From the Youtube player api doc

Stopping any vimeo video on the page with jquery

sorry about my inexperience. I was given a certain html code:
<div class="embedded-video" style="display: block;">
<span class="fa fa-times-circle video-closer">Close</span>
<p></p>
<div>
<iframe allowfullscreen class="roots-video" frameborder="0" height="360" src="https://player.vimeo.com/video/155722997?title=0&byline=0&portrait=0" style="display: block;" width="640"></iframe>
</div>
<div>
<iframe allowfullscreen class="roots-video" frameborder="0" height="360" id="spvideo" name="spvideo" src="https://player.vimeo.com/video/155722997?title=0&autopause=1&byline=0&portrait=0" style="display: block;" width="640"></iframe>
</div>
</div>
I need a "close" button that stops the videos, whichever one is playing at the moment, or all that are playing, since you will only be able to play one a time.
I used a solution copied from https://stackoverflow.com/a/12932722/3808307
adding
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
and
var iframe = $('.roots-video')[0];
var player = $f(iframe);
$('.video-closer').click(function() {
alert('stoped');
player.api('pause');
});
But it obviously only works for the first video. How do I get the close to work for all the elements of the array? I don't care about performance here, I just want the close to stop all the videos that are playing if I cannot identify which one is playing
I don't have idea how it works but just a guess according to your exists code
$('.video-closer').click(function() {
$('.roots-video').each(function(){
var ele = $f(this);
ele.api('pause');
});
});

onClick add parameter to url

I am trying to insert a youtube video with a custom thumbnail to my website. Therefore I found this code, which I am using.
<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" />
</div>
<div style="display:none">
<iframe width="420" height="315" src="https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
It works so far, but the autoplay makes the video play behind the cover image. So I've tried to add the autoplay parameter onClick, so it changes to true as the cover hides.
I have tried to use
<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.href + '?rel=0&autoplay=1'; this.style.display='none'">
But this isn't working. To be honest, I have no background in JS and do not know what I am doing. Could anybody please help me with this? Just adding a URL parameter to a given Link onClick.
thank you.
I think you are not doing things the right way.
when you change the url of the iframe, the iframe will reload, not just start to play.
try this:
<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.children[0].src='https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1'; this.style.display='none'">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" />
</div>
<div style="display:none">
<iframe width="420" height="315" frameborder="0" allowfullscreen>
</iframe>
</div>
this will show the iframe and change the url the same time.

Closing jQuery Overlay and stopping the video

As per this question I want to close the overlay and stop the video being played.
My code is:
<div id="video_pop_1" class="video_pop_1" style="display:none;">
<div class="video_close" id="video_close">
<img src="/wp-content/themes/volo/images/cross.png" alt="Volo Multi Channel eCommerce Inventory Management Software" title="Volo eCommerce 2015 copyright" width="50" height="50" alt="close">
</div>
</div>
$('#imageID').click(function() {
$('#video_pop_1').show();
$('#video_pop_1').append('<div class="video_close" id="video_close" style="z-index:9999;"><img src="/wp-content/themes/volo/images/cross.png" alt="Volo Multi Channel eCommerce Inventory Management Software" title="Volo eCommerce 2015 copyright" width="50" height="50" alt="close"></div><iframe width="80%" height="80%" id="video" src="//www.youtube.com/embed/uEQ8wTXjklw?autoplay=1" frameborder="0" allowfullscreen wmode="Opaque" class="vid_pop_player"></iframe>');
$('.video_close').click(function() {
$(".video_pop_1").fadeOut(300);
});
});
Which all works, all that happens now is the video continues to play in the background - how can I stop the video playing?
https://www.volocommerce.com/ebay-targeted-campaign/
The video you want to view is the one under "Board Basement" 3/4 way down the page - any ideas on how to get around this?
Thanks!
The video keeps playing because it's effectively only hidden by the fade out. To stop it you can remove the HTML you appended from the DOM. To achieve this you can use the callback from the fadeOut() animation. Try this:
$('.video_close').click(function() {
$(".video_pop_1").fadeOut(300, function() {
$(this).empty();
});
});

How to get an iframe to show when hidden?

I have an image that I want the user to see. When the user clicks on this image I want the image to go away and have the video show in it's place. Can someone show me how to do this?
Here is the code I have so far.
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<a href="#">
<img src="../../../upload/1/img/video.jpg" style="display:none" />
</a>
<div id="video" style="display:inline">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
If someone could edit my post to clean the code up that would be great. I can't figure it out.
To describe the code a little bit:
This is what the code should look like after I click on the image. When you first see the page, the two display styles will be reversed.
Any help will be awesome.
Thanks
A general Idea can be like this:
$(function() {
$("img").click(function() {
$(this).css("display","none"); // will hide your image
$("body").append("<div id='video'></div>"); // will append div with id video, this div should have video code inside this.
});
});
You want to hide the video initially, so give it the style display:none. You also want to give your thumbnail image an id so you can reference it in jQuery. You can also remove the <a> tag from around the image (its not needed)
HTML
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<img id="thumbnail" src="../../../upload/1/img/video.jpg" />
<div id="video" style="display:none">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
JavaScript
$(document).ready(function(){
$("#thumbnail").click(function(){
$(this).hide()
$("#video").show()
})
})
I would also try to avoid adding CSS styles inline if you can

Categories