I have more than 15 thumbnail images displayed(fetched from DB and looped) on the webpage. Onclick of an image, I have an overlay which plays the youtube video(iframe version).
The problem is that, on closing the overlay, the youtube video continues to play.
After going through the YT documentation, I figured out that there is no way to control the YTplayer inside an iframe. But, I have to use an iframe because embed and object tags make use of flash and flash is not supported in Mac(Mountain Lion)
So, I was thinking, if there is a way to deactivate iframe then the player may stop. display:none; does not help.
Please suggest.
Thanks in advance.
I tried this method and it works:
I fetch the iframe source by id using javascript and make the source blank.
<script>
function stopVideo(){
document.getElementById("iframeID").src= "";
}
</script>
Related
I'm using videojs-youtube plugin to play embedded youtube videos inside my web-app. Recently I have noticed that when the web-app is being wrapped inside an iframe, the video gets stuck on infinite loading. The console doesn't show any related errors due this process.
While trying to debug this problem I realised that the PlayerStatus (as described in IFrame Player API) is being changed in a wrong way:
When the video isn't wrapped in iframe the PlayerStatus changes from 'unstarted' to 'buffering' and to 'playing'. On the other hand, When the video is being wrapped in iframe the PlayerStatus changes from 'unstarted' to 'buffering' to 'unstarted' once again.
And there is one weird exception though - when chrome extensions such as AdBlock or LastPass are installed and activate, the video plays properly, even if its inside an iframe.
Any idea why is this happening?
Thanks :)
I had the same issue but I think I've found a solution for my problem after hours of trying... Adding allow="autoplay" to the iframe fixes it for me, it doesn't make total sense since sometimes it does work without adding this.
To clarify, I'm using video.js and videojs-youtube.js in an iframe, inside that iframe, if you play a Youtube video, another iframe is created inside the iframe. And I'm guessing that clicking on the video player to play Youtube video isn't considered user interacting with the inner iframe, because videojs-youtube programmatically tells youtube video to play in that inner iframe, and Chrome doesn't allow video inside an iframe to be played unless user has interacted with it.
This doesn't explain why 5 percent of the time it does play fine. Anyways, adding allow=autoplay to the outer iframe tag that contains the videojs player makes it work 100 percent of the time for me.
I am using Firefox on Ubuntu Linux for testing. If I put the following link to an MP4 file in a page, the MP4 file plays in the browser window without any need for additional scripts or players:
<img src="/video/thumbnails/test.png" alt="" />
However, I want to be able to stay on the same page, and play the video in a popup window, with the rest of the screen darkened. I believe this effect is called a "lightbox".
Thinking I could just use any lightbox and leave it to the browser to play the video file, I found an open source Javscript library for doing the lightbox effect, called Lightbox2. It's light and simple.
Following the instructions, I loaded the Javascript in the <head> of my web page, and then I added data-lightbox="image-1" to the link:
<img src="/video/thumbnails/test.png" alt="" />
When I click on the thumbnail image, the lightbox effect works, but the video does not display or play. The lightbox darkens the screen and displays a white square in the middle with no video file or player controls.
I know there are Javascript lightbox effects designed for playing videos, but, since the browser can play videos anyway, what differentiates those Javascript libraries from the one I'm using?
Why can't I play a video in this simple lightbox effect?
Can it be modified to play video, or do I need to scrap it and find a different library? Recommendations for similar video capable libraries are very welcome.
I'm really sorry for getting back on this so late.
Okay so just an approach I had in mind at that time. It's left to you if you wanna try this out. But, if you want to avoid using third party scripts that you might have trouble tweaking here's simple approach. preferably, I'm going to use jquery code here just to make it look nice.
so lets say you want to have the video appear to pop up when the link is clicked. Why not just have our own div that contains a video element and then keep it hidden till we need it.
.
.
.
<body>
<div id="vid-container" style="display:hidden;position:fixed; background: rgba(0,0,0,0.5);
padding:40px; text-align:center;">
<video id="vid"/>
</div>
</body>
.
.
.
So, basically what I'm intending to do is that when a person click's on a video link, we'll use some jquery to toggle the popup div. As you can see that in the video tag I've only specified the id. This is only because I'm intending to set the video src and the codec after a particular link is clicked via javascript ( and a little bit of jquery).
So suppose we have a link like so:
<a href="Link_URL" class="vid-link" ><image src="img_URL" class="vid-img"/></a>
And a person clicks on it, this is how I though you could handle it through the following script.
<script>
$(window).load(function(){
// first of all I'm manually setting the pop's width and height to fit the entire screen
$("#vid-container").css("width",window.innerWidth+"px");
$("#vid-container").css("height",window.innerHeight+"px");
$(".vid-link").bind("click", function(){
// first get the video url from the link href
var vid_url= $(this).attr("href");
// now grab hold of the video and set it up by plugging in the video url
var video= document.getElementById("vid");
video.type="video/.mp4";
video.src="+vid_url+";
video.controls=true;
video.autoplay=false;
// now toggle the popup visible
$("vid-container").fadeToggle("slow");
});// end of click handler
});// end of window.load event
</script>
We'll I think that should solve the bare necessities of your requirement. You could do alot more with it.
Hope this helps :)
Viva la HTML5!
I am embedding a youtube/vimeo video onto my site with an iframe.
<iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...></iframe>
The {$entity->getYouTubeVideoID()} bit is smarty template code syntax. I don't think that is the problem because the video uploads and plays fine in Chrome and IE9 and up. The video also uploads to firefox and safari fine, meaning I can see the video and it's the right one. But when I click the video it does not play in either firefox or safari.
What is interesting is that the other events are triggered. That is, on mouseover the play buttons on the videos change. On the youtube videos, the button in the middle with the play icon starts out as grey and on mouseover turns to red. So the iframe is registering events. But, it won't play on click. I have no idea where to go from here.
The only other event handlers I have on the iframe is this one but I doubt that is messing it up:
$(window).blur(function(){
if($('iframe').is(':focus')){
mySwipe.slide(mySwipe.getPos(), 1000);
}
});
(mySwipe refers to the swipe.js slideshow library)
I had an issue with playback buttons in firefox also. I was using a html5 Doctype, so I added the following after the youtube url
&html5=1
maybe this might help you.
I simply could not get embedded videos to play inside the swipe.js library (or any other touch enabled jquery library). My solution was to extract thumbnail images from vimeo/youtube APIs and use them as placeholders in the slideshow. Then register a click event on the thumbnail that opened the video in a lightbox.
I know this thread is six years old, but I recently had this problem and all of the solutions on the internet did not work. But I figured it out for my site:
If you have a secure site (HTTPS) and you embed a youtube video with the code posted here,
iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...
... Firefox will block it, because that is "Mixed content." HTTP is unsecure, so it is not allowed to show.
Youtube is an HTTPS site, so including that "s" in your URL will allow it to play in Firefox and IE without having to disable security.
Flexslider 2 basically solved it. Swipe.js is wonderful, but with playing youtube/vimeo in a slider Flexslider works better.
I'm working on a little side project.
I'm able to embed and display specified vine.co video's with
<iframe id='eFrame' src='http://vine.co/v/bJjdTLBnwx1/card' width='380' height='380' frameborder='0'></iframe>
I'm pulling in the links via Ajax to display them on the page, however now the problem is they are all autoplaying, which causes major browser lag.
Anyone know how I can append them to the body with autoplay disabled? This project is all client side, so I'll be limited to client-side languages. (ie Javascript/jQuery etc..)
Much appreciated, Cheers.
I'm probably late but you can pass some command via the postMessage javascript's function. It worked for me :
var iframe = document.getElementById(id);
iframe.contentWindow.postMessage('pause', '*');
Same construction for play, mute and unmute.
<iframe id='eFrame' src='http://vine.co/v/bJjdTLBnwx1/embed/simple' width='320' height='320' frameborder='0'></iframe>
Try this it will be of much help have better controls and only on pressing the play button it will run.
Try it.
I use swfobject to load a youtube embedded video, it works nice, but when i try to load another youtube video after a specific time it doesn't work, It looks like the container div is totally replaced with the swf instead of putting it inside it.
Note: i attempt using swfobject.embedSWF(path,divID,width,height) to load other videos which doesn't work.
Any ideas?
SWFObject v2.x replaces the target HTML element with an <object>.
If you want to use the same target element for multiple SWF embeds, you'll need to re-create the target element before attempting your subsequent embed. Here's a link to a tutorial for this topic (scroll down to "Replacing a loaded SWF with another SWF").
I know this is an older post, but just thought I'd mention that I ended up just using the YouTube javascript API to switch the video. Simpler, and the transition looks cleaner than trying to remove the object and add another one.