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
Related
I'm working on an extension and I need help to remove the video controls and replace it with the native browser controls.
This is what I have
document.getElementById("(*YOUTUBE CONTROLS*)").innerHTML = "<video controls>"
You can hide youtube controls with ?controls=0 after src
ex:
and some more customization.
To reskins the player you can write a custom jquery of js function to edit the content of the frame after it's loaded.
Here's and example
HTML
<iframe width="800" scrolling="no" id="prev" src="">your browser needs to be updated.
</iframe>
jquery
$(document).ready(function() {
$('#prev').contents().find('body').html('<div> blah </div>');
})
I'm trying to create popup with Vimeo video inside. I have div on my page with id="showVideo". On click on that div I want to open popup (new div with id="opened-video" ). Div with id="opened-video" have iframe of Viemo video that looks like this
<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
This iframe is set to auto play using ?autoplay=1 parameter in src url.
This is my JavaScript
jQuery(document).ready(function(){
jQuery('#showVideo').click(function() {
jQuery('#opened-video').fadeIn().html('<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><img src="<?php echo get_template_directory_uri()?>/images/resp-menu-close.png" alt="Close video" onClick="closeDiv()" id="close-video" />');
});
});
and this works.
You will notice image tag in html() function, that's image that is used to close id="opened-video" and I do that with Javascript function
function closeDiv() {
document.getElementById('opened-video').style.display = "none";
}
and this works too, but with one problem, opened-video is set to display="none" but Vimeo video is still playing in background, I hear sound. How to stop video working when I press on id="close-video" image? How I can remove src parameter ?autoplay=1 when I click on image? Or any other suggestion?
This is HTML
<img src="<?php echo get_template_directory_uri()?>/images/play-real.png" alt="Play real" id="showVideo" />
<div class="video-front" id="opened-video">
</div>
Inside your closeDiv() function, insert these two lines after making the display none,
$('iframe').attr('src', "");
$('iframe').attr('src', $('iframe').attr('src'));
So that it will look like,
function closeDiv() {
document.getElementById('opened-video').style.display = "none";
// Removes the src
$('iframe').attr('src', "");
// Reloads the src so that it can be played again
$('iframe').attr('src', $('iframe').attr('src'));
}
Working DEMO
I have an image that is inside a div.
The image is a play button.
On top of the image I have placed an iframe which is invisible.
When I click the image I want the iframe to appear and start playing
ok i think i found a code that is supposed to do the same thing but i cant make it work
<img src="http://www.plaisio.gr/Images/Promo/20140808-Promo-Turbo-X-Pi/turbox-pi_promo_v01_03.jpg" alt="" style="display:block;" name="video" id="video" height="272" width="495"> <iframe id="promo_video" src="" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display:none;position:absolute;top:175px;left:344px;" frameborder="0" height="272" width="495"></iframe>
<script type="text/javascript">
$('img#video').click(function(){
$(this).parent().parent().find('#promo_video').attr('src','http://player.vimeo.com/video/102923007?autoplay=true');
$(this).parent().parent().find('#promo_video').fadeIn('slow');
})
</script>
but its not working.... any help??
i found a simmilar working example here http://www.plaisio.gr/Campaign/20140808-Turbo-x-Smartphone-P.htm
In your html you dont need the button, just add onclick="myFunction();" to your <img>
In your css you should only have display:none, not visibility: hidden
In you javascript document.getElementsByClassName("video") returns an array. Try this:
function myFunction() {
var x = document.getElementsByClassName("video")[0];
x.style.display = "block";
}
Check it out here: jsFiddle
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');
});
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