Develop Reference

Pause YouTube video within iFrame

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 = "";
});

Mobile iframe youtube viewing trying to download and not show video

I have the following code working for desktop but not mobile. The code displays an image and if that image is clicked it will then replace it with an iframe holding the youtube video assigned to it..
<img src="/image/background/ph_shop.jpg" alt="Shop Directions" class="video-placeholder img-force shadow-box pointer" data-video="https://www.youtube.com/v/m8qcEilvdMQ&rel=0&autoplay=1" />
<script>
$(".video-placeholder").click(function(){
var video = \'<iframe frameborder="0" class="width-100 shadow-box" height="400" src="\'+ $(this).attr(\'data-video\') +\'" allowfullscreen></iframe>\';
$(this).replaceWith(video);
});
</script>
When I try to click the image in mobile it removes the image but doesn't load anything in it's place and then it tries to download a file that cannot be opened called "m8qcEilvdMQ&rel=0&autoplay=1"

I had the same problem and solved it!
The solution is to change your YouTube Video URL.
Replace the /v/ in your url with /embed/.
For example, replace your URL https://www.youtube.com/v/m8qcEilvdMQ&rel=0&autoplay=1 with https://www.youtube.com/embed/m8qcEilvdMQ&rel=0&autoplay=1
I don't know why the "v" URL starts a download, I think it is because it returns the header with content-type application/x-shockwave-flash, and the embed URL returns a content-type text/html.

How to stop Youtube Video (not HTML5) from javascript in iPad

I've created one app in HTML5 and javascript for iPad.
I've put links in page, by clicking that will show/hide different youtube videos.
Here is code
In ipad if i hide one youtube video and show another at that time previous video keeps playing in background till new video loads.
I want to stop previous video playing before another video gets loaded.
(I am using latest iOs, that plays youtube video in quicktime player.)

Here
DEMO
var vids = {
vid1:"http://www.youtube.com/embed/87O_YA4rLyk",
vid2:"http://www.youtube.com/embed/nQ2TsPhsWTA"
}
$(function(e) {
$(".video-section ul li").click(function(e) {
$(this).hide();
$(this).siblings().show();
$("#vid").attr("src",vids[this.id]);
});
$("#vid1").click();
});
<div class="videoContain-big">
<p>
<iframe id="vid" width="560" height="315" src="about:blank" frameborder="0" allowfullscreen></iframe>
</p>
</div>
<div class="video-section">
<ul>
<li id="vid1">Click here to Change Video 1</li>
<li id="vid2">Click here to Change Video 2</li>
</ul>
</div>

QuickTime exposes a number of methods to JavaScript. Some take the form of commands that operate on movies, such as Play(),Stop(),Rewind(), and so on. The rest operate on properties of QuickTime as a whole, the QuickTime plug-in, movies, or tracks. Most of these properties can be read or written using complementary Get and Set methods. Other properties, such as the QuickTime version, are read-only.
You can find a lot of information here

How do I display youtube videos with lytebox?

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

JavaScript dynamic iFrame not showing up

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