I'm trying to play an embedded Youtube video after a button click (.playbutton).
The video is embedded as an iframe within a div named #youtubecontainer.
The easiest way to achieve this is to append '?autoplay=1' to the iframe's src attribute. (I know there is an API, but for now I need to do it this way.)
My HTML code is this
<div class="playbutton">
<img class="playicon">
</div>
<div id="youtubecontainer">
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520" frameborder="0" allowfullscreen></iframe>
</div>
Javascript code
$(function() {
//This controls YouTube playback via button
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', ($("#youtubecontainer iframe").attr('src') + '?autoplay=1'));
});
});
However, this appends'?autoplay=1' to the src twice, so it reads as follows and fails:
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520?autoplay=1?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
Any ideas why?
Try to replace that autoplay before you add it. Because when you second click on it, you are adding again the ?autoplay=1 what has still there before.
Working DEMO
$("#youtubecontainer iframe").attr('src', $("#youtubecontainer iframe").attr('src').replace(/\?autoplay=1/, "") + '?autoplay=1');
You could try to save the original src of the iframe before the click event:
var source;
$(function() {
//This controls YouTube playback via button
source = $("#youtubecontainer iframe").attr('src');
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
});
});
Working fiddle: http://jsfiddle.net/robertrozas/notjtz3d/1/
Related
I have a YouTube video playing in the background AFTER the close button is clicked...Here's the jQuery I can't get to work:
$('#close1').on('click', function() {
// $('#video1').stopVideo();
$('#video1')[0]
.contentWindow
.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
Here's a the example: http://georgehowell.biz/unsw1/index.html
i found this interesting thread related this issue and it has many suggestions of solution, maybe any of them will work for you:
Stop embedded youtube iframe?
Without using YouTube's iframe_API; you can simply use:
iframe.contentWindow.postMessage(message, origin);
to send message to iframeWindow (from parentWindow). Those messages can include "playVideo", "pauseVideo", "stopVideo", "muteVideo" etc.. (whatever video service, in this case youtube, supports)
Check out the link below for the live demo:
https://codepen.io/mcakir/pen/JpQpwm
change 1 - the iframe src url should be blank here
<div id="openModal1" class="modalDialog">
<div>
X
<iframe width="600" height="338" src="" class="homeVideo" id="video1" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div> <!----END modal-body ---->
</div> <!----END modal ---->
change 2: how to play the videos just set the src URL with autoplay=yup on the query string - we do not need to enable the JS api:
$('#thumb1').on('click', function(ev) {
$("iframe#video1")[0].src = "https://www.youtube.com/embed/Lop0VCYdpGQ?rel=0&wmode=transparent&autoplay=1";
});
change 3 - how to pause - just set the iframe src to an empty string:
$('#close1').click(function(){
$("iframe#video1")[0].src = "";
});
I want to give action to iframe with blur and focus,
The scenario of my code is,I written a android question in webpage,beside that question I displayed android phone picture,what ever the code written below the question,the output will be shown in that picture and if you are out of browsing area,the title will shown as inactive.
action should be infocus or outfocus.
for this command I am writing,
<div class="andr_app">
<iframe src=" <%= request.getContextPath()%>/images/mob_empty.png" width="400px" height="800px" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no"></iframe>
</div>
Please help me in this.
The iFrame element doesn't have focus or blur events, so you need to use the window.
var iframe = document.getElementById('iframe');
var iframeWindow = iframe.contentWindow;
iframeWindow.onfocus = function(){
//focussed
}
iframeWindow.onblur = function(){
//blurred
}
Reference: answer
Finally I got my answer,but not in iframe.
I change iframe to object,
<object data="<%= request.getContextPath()%>/images/mob_empty.png" width="325px" height="560px" style= "padding-right: 85px"; id="iFrameUrl${questionId}" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no">
</object>
I have a quite peculiar problem with some jQuery code.
Basically I'm trying to work out a video mirror script where you click on a button and the div should change embed code to another video service. This is my code:
jQuery(function($){
$('#mirror1').click(function(){
$('#player-embed').html($('<div />').append($('#video1').clone()).html());
});
});
This is the code for the button
function mirror1( $atts, $content = null ) {
return '<a class="wpb_button_a" title="Mirror 1" href="#mirror1" id="mirror1">
<spanclass="wpb_button wpb_btn-primary wpb_regularsize">Mirror 1</span></a>
<div id="video1" class="video1">' . $content . '</div>';
My problem is that the output gives excessive " quotations
So all I'm seeing is (on page, not in code)
<iframe frameborder=”0″ width=”480″ height=”270″ src=”videourltest” allowfullscreen> </iframe>
And not the actual video itself.
Thanks in advance.
Your code:
<iframe frameborder=”0″ width=”480″ height=”270″ src=”videourltest” allowfullscreen> </iframe>
Your ” and ″ are typographic quotes and not code quotes, code quotes are straight like "
Try:
<iframe frameborder="0" width="480" height="270" src="videourltest" allowfullscreen> </iframe>
I have a youtube embed code here: <iframe width="560" height="349" src="http://www.youtube.com/embed/F_sbusEUz5w" frameborder="0" allowfullscreen></iframe>
that I'd like to display using a modified version of lightbox 2 called lytebox, found here:
http://www.dolem.com/lytebox/
Thanks in advance.
Try this,
Click here to view the video.
Easiest one is : Save your iframe in different html page and load this page by lytebox
<a href="http://yoursite.com/yourpage.html" rel="lyteframe" title="title"
rev="lytebox styling">Your video name</a>
You can also use embed link directly instead of page
I'm using JS to build some HTML that includes the new iframe syntax from YouTube.
When someone clicks a link on the page to a YouTube video, JS checks the document size and if it's big enough, will open up a lightbox-style box on the page and play the video there.
When I test it out, it opens the HTML but the space is just white and the source code shows an empty <iframe> element.
Is there a problem with trying to dynamically add an iframe to a page?
Here is the relevant part of the JS:
iframe = '<iframe width="'+defaults.width+'" height="'+defaults.height+'" src="'+vidsrc+'" frameborder="0" allowfullscreen></iframe>';
container = '<div class="videopow-overlay"><div class="videopow-container">' + iframe + '</div></div>';
$("body").prepend( container );
Here is what gets output:
<div class="videopow-overlay">
<div class="videopow-container">
<iframe width="800" height="485" src="http://www.youtube.com/watch?v=phzvyIQWCo8?hd=1" frameborder="0" allowfullscreen="">
<html><head></head><body></body></html>
</iframe>
</div>
</div>
Change vidsrc from:
http://www.youtube.com/watch?v=phzvyIQWCo8?hd=1
to
http://www.youtube.com/embed/phzvyIQWCo8?hd=1