I have a youtube video pop up that works well but I want to include a custom close button. I have done research but this has all come to nothing so I am hoping my stack buddies can help.
What I am estmiating from your question is you want a custom close button to close the DIV or iframe that your YouTube videos are in. I suggest jQuery for this:
$(function(){
$(".closeBtn").click(function(){
$($(this).data("target")).hide();
});
});
Then in the HTML:
<div class="video" id="v1">
<div class="closeBtn" data-target="#v1"></div>
<iframe></iframe>
</div>
JS Fiddle
What the data-target (data-target="#v1") does is target the ID of the div (<div class="video" id="v1">) then in jQuery, adding the animation effect .hide() , .fadeOut(500) to the ID.
Related
i have a wordpress website, there is a slider in the homepage which is coming from some widget, the slider is static, when i inspected the element it was showing something like below:
<div class="swiper-container services-slider swiper-container-initialized swiper-container-horizontal" data-cols="3" data-autoplay="0">
now i want the slider to autoplay automatically, as i am not able to edit the code of the slider i am trying to put some css in the head section of the website so the slider plays, how can i add autoplay attribute inside css, please help, thanks in advance
With jquery something like this may work if the slider options have not already been rendered from the data attributes
$('.swiper-container').data('autoplay', 1)
Or
$('.swiper-container').attr('data-autoplay', 1)
With on ready
(function($){
$(document).ready(function(){
$('.swiper-container').attr('data-autoplay', 1)
});
})(jQuery);
I would like to add a play button somewhere on the page, and when they click it, the player at the bottom will play also, then the play button will disappear. Is that possible? Thanks.
You need a little bit JavaScript code.
Add an event-listener for the button, select the audio-tag (your player) and call the play-method. Then hide the button with the css-property "display: none;" or "visibility: hidden;" (also with JavaScript).
<button onclick="document.getElementsByTagName('audio')[0].play(); this.style.visibility = 'hidden';">play</button>
<audio controls src="demo.mp3"></audio>
I created simple jquery mobile website, where you click an button and iframe with video is loaded on popup.
My problem is that video keeps playing after i close the popup.
How can i avoid this?
Jquery mobile documentation says that this will happen, and i should listen to popupafterclose event.
http://demos.jquerymobile.com/1.2.0/docs/pages/popup/popup-iframes.html
But how can i do that, can someone make me an example?
Demo of problem: http://jsfiddle.net/43nk572m/1/
HTML:
<!-- BUTTONS -->
Open Iframe Popup1
Open Iframe Popup2
<!--POPUPS-->
<div data-role="popup" id="testing" data-theme="b" data-tolerance="15,15">
Close
<div data-role="header">
<h1>blablabla</h1>
</div>
<iframe src="http://player.vimeo.com/video/110823244" width="520" height="360" scrolling="no" seamless="seamless"></iframe>
</div>
<div data-role="popup" id="testing2" data-theme="b" data-tolerance="15,15">
Close
<div data-role="header">
<h1>blablabla</h1>
</div>
<iframe src="http://player.vimeo.com/video/110823244" width="520" height="360" scrolling="no" seamless="seamless"></iframe>
</div>
Please note that popup div id is always changing so i cant just call some javascript to kill #testing2 for example.
I appriciate your help!
Regards
M
You should try something like this:
$("#testing").bind({
popupafterclose: function(event, ui) {
$(this).find('iframe').remove();
}
});
For the popup div, you can use the jQuery selector '[data-role="popup"]'. To catch the popupafterclose event, delegate it from the document, so that any dynamically created popups will trigger the event:
$(document).on( "popupafterclose", '[data-role="popup"]', function( event, ui ) {
$(this).find("iframe").prop("src", "");
});
In the event handler, find the iframe element and set its src prop to an empty string.
DEMO
Does anybody know of a non Javascript youtube video pop up. I have a button on my homepage which I want to open a pop up with a youtube video inside.
Thanks guys
this is my link
<span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span>
this is my iframe
<iframe width="420" height="345" src="<iframe width="420" height="345" src="http://www.youtube.com/embed/krlR2-YGk4sI?autoplay=1" frameborder="0" allowfullscreen></iframe>" frameborder="0" allowfullscreen></iframe>'
I just need to find a way to make it pop up in the center of the screen like a fancybox, without javascript. Thanks guys
no i dont think there is a method without using JS but it is very simple with JS for a piece like this. you should just be able to place the popup in a div and then use CSS to make it hidden then on the button click a JS function that will bring it to the top.
Hope this helps :)
<div id='PopUp' style='display:none;'>
<iframe></iframe>
</div>
<button onclick='showPopUp()'>click Me</button>
<script>
function showPopUp()
{
document.getElementById('PopUp').style.display = 'block';
}
</script>
i've a code which let start a youtubevideo after clicking on a image.
The Problem is, that Opera, Chrome ect. start the video behind the image before clicking.
Firefox works fine.
Heres my code:
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img style="cursor: pointer; margin-left: 89px;" src="./img/style/new/slider/XXXXXX.png" alt="" />
</div>
<div id="thevideo" style="display: none;">
<iframe width="604" height="266" src="//www.youtube.com/embed/XXXXXXXX?rel=0&autohide=2&showinfo=0&controls=0&modestbranding=0&wmode=transparent&showsearch=0&version=3&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
Can you help me for a better code?
Additional is it possible to show the Image again after the video ends?
Thanks in advance
EDIT: push
What if you paste the iframe code to #thevideo when the user clicks the image?
I think you can use the .append() function in jQuery to do it.
The chrome/opera...browser issue is a known issue. There are browser settings that you can change that will make it so that it does not auto play the video, since you are really just putting a mask over the video. See this article: Stop youtube autoplay
EDIT:
To handle it with a programmatic approach:
change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
See above:
EDIT: To handle it with a programmatic approach: change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
I used it and it works great!