I am trying to make a play and pause button
HTML:
<img id="change" src="../play button.png" width="100" height="100" /><script src="../jquery.js"></script>
<div id ="video">
</div>
Jquery:
$('#change').click(function () {
$('#video').html('<iframe width="0" height="0" src="//www.youtube.com/embed/....?autoplay=1" frameborder="0" allowfullscreen></iframe>');
});
$(function() {
$('#change').click(function(){
$("#change").attr('src',"../pause button.png");
});
});
At the moment when you click on the play button it changes to a pause button img. And open a youtube video that opens hidden so that you can just hear the audio. I am looking to then; when you click the second time remove the html for the youtube video (So that it stops playing [or if you are feeling helpful you can help me find a way to make the video pause]) and then put the play button img back?
Related
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');
});
});
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();
});
});
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 six image buttons on my Tumblr blog that I want to add this sound effect to play when I hover over the image.
Each button is set up like:
<form name="mybutton" action="insert link here" method="POST">
<div style="position: absolute; left: 247px; top: 204px;">
<input type="image" id="button" src="insert image here " onMouseOver="this.src='insert image here'" onMouseOut="this.src='insert image here'"/>
</div>
</form>
However, no matter what I do, I can't get it to work. I would like to keep it simple if possible. Can someone help me?
This HTML:
<audio id="audioImagePlay" style="display:none">
<source src="url to your audio source" />
</audio>
And this JavaScript:
<script>
//get the button element and attach the onmouseover event handler to it. When mouse over fires execute function playAudio.
document.getElementById("button").addEventListener("mouseover", playAudio, false);
function playAudio()
{
//get audio element and initiate play.
document.getElementById("audioImagePlay").play();
}
</script>
Should do it for you.
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');
});