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 = "";
});
Related
For several days I am trying to autoplay unmuted video based on embed from youtube.
In the repository I am generating two types of string which are passed to view:
finalUrl = String.Format("https://www.youtube.com/embed/videoseries?list=" + videoList + "&version=3&enablejsapi=1&iv_load_policy=3&loop=1&autoplay=1&mute=1&vq=hd1080");
finalUrl = String.Format("https://www.youtube.com/embed/" + videoId + "?version=3&enablejsapi=1&iv_load_policy=3&loop=1&autoplay=1&mute=1&vq=hd1080&playlist=" + videoId);
When I try to do &autoplay=1&mute=0 or &autoplay=1 it is unmuted but video doesn't start.
In .cshtml I am using iFrame to render video:
<div class="responsive-video">
<iframe id="youtube-video" class="video center-block"
src="#Model.youTubeVideoData.Description"
frameborder="0" allow="autoplay"></iframe>
</div>
</div>
I also tried to use
player.unMute();
player.playVideo();
but without any success.
Is it possible to create autoplay unmuted in 2020? In a different way? Maybe I should use some external library to do that? Someone had similar problem to mine?
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.
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/
I had tried the iframe for embedding youtube video in sencha inside the html tag.
....
html:'<iframe>Youtube URL</iframe>'
....
I added the above code inside the second icon of the tab bar. The second icon is a scroll view.i.e i set it to scroll:'vertical'
My Problem is when i add youtube video.It comes like this...
Look.Only Part of the video is shown.
when i switch to other tab panel,the video appears as below.
Any Help!!!
I've done this using HTML inside a panel. of course it doesn't play embedded in the sencha app. It jumps to the youTube player.
html: '<div style="margin-left:12px; margin-top:20px"><h1>Syndicate Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/ewwtznVkSxA" frameborder="0"></iframe></p><h1>Prometheus Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/sftuxbvGwiU" frameborder="0"></iframe></p></div>'
This leaves the links in the video frame which didn't suit my app so I modified to use this instead:
html: '<div style="margin-left:12px; margin-top:20px"><h1>Eddies Cinema Slot </h1><p><embed id=\"yt\" src=\"http://www.youtube.com/watch?v=5a9-ORWn0fY\" type=\"application/x-shockwave-flash\" width=\"290\" height=\"260\"></embed></p></div>'
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