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>
Related
I will try and be as thorough with my question as possible the first go round. My question is this:
I am trying to embed a Vimeo video on to Blogger that plays at a specific timestamp, i.e. 4mins 32secs, instead of the beginning of the video without it autoplaying. The video will embed fine at the timestamp but it will autoplay and I cannot figure out how to turn that feature off. The code for the video is below:
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s" webkitallowfullscreen=""width="500"></iframe>
I have tried various methods "?autoplay=0" etc. but I guess I am not getting the code right.
Any help would be greatly appreciated
have you tried like this ?
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s?autoplay=0" webkitallowfullscreen=""width="500"></iframe>
if it didn't work then try to find it by inspect element, it may be changed to ?autopplay=1 after page load,
so try this method it worked for me
first your html, paste a screenshot of your vimeo video in an image tag and define an onclick function for that and bind iframe on click function,it should work
here is the code
<div id="parent-div" >
<img id="vimeo-video" src="images/homeVideo.png" onclick="return imgClick();" />
</div>
and your javascript function
function imgClick() {
jQuery('#image-for-video').hide(); //hide the image to display your video
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://player.vimeo.com/video/1992892829?autoplay=0");
ifrm.style.width = "496px";
ifrm.style.height = "277px";
// add rest of your values
ifrm.frameborder = 0;
document.getElementById("parent-div").appendChild(ifrm);
return false;
}
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
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.
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!
I have a HTML page with 30 links each pointing to a YouTube video. All videos belong to the same YouTube Channel.
The HTML page also features a YouTube player.
I am trying to figure out if the following is possible (possibly without using PHP): Once a link is clicked, the video player refreshes on the same page and showes the video. The page itself does not refresh - only the video player does.
Are there any options other than PHP?
Can anyone link me to some sort of super easy guide for doing it myself? (..."below beginner" level).
How you are linking with youtube? with iframe tag ? If you are using iframe then you can see all the videos in same page only. Page won't refresh.
If it is not the case please be more specific.
You can do this using jquery. In the href attribute of links, use video's embedded url, as in below code.
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('a').click(function() {
$('iframe').attr('src', $(this).attr('href'));
return false;
});
})
</script>
<iframe width="560" height="315" src="http://www.youtube.com/embed/J5x5gduEWtI" frameborder="0" allowfullscreen></iframe>
<br><br>
<a href='http://www.youtube.com/embed/J5x5gduEWtI'>Link1</a>
<a href='http://www.youtube.com/embed/WmDmUDXxeXU'>Link2</a>
<a href='http://www.youtube.com/embed/UNlgAuMWuvw'>Link3</a>
Edit:
This will also works.
<iframe id='iframe' width="560" height="315" src="http://www.youtube.com/embed/J5x5gduEWtI" frameborder="0" allowfullscreen></iframe>
<br><br>
<a href='http://www.youtube.com/embed/J5x5gduEWtI' target='iframe'>Link1</a>
<a href='http://www.youtube.com/embed/WmDmUDXxeXU' target='iframe'>Link2</a>
<a href='http://www.youtube.com/embed/UNlgAuMWuvw' target='iframe'>Link3</a>
If you don't want the page to refresh, then your only option is JavaScript (i.e. you have to do it clientside).
You can do it by keep the youtube player in an iframe which has some ID (e.g: id="playerFrame"). Then in the relevant hyper link ('a' tag), put the id of the iframe as the value of "target" attribute.
<iframe id="playerFrame"></iframe>
Click to see video 1
See http://webdesign.about.com/od/iframes/qt/target-links-iframes-and-frames.htm