How do I make it so when I have an embed code for a video, if they click the video it goes to another page? but doesn't mess with the controls of the video itself?
Thanks!
Usually, the "link" the video goes to is actually controlled by the flash movie that plays the video. If you use HTML5 video, you can control it better with usual JS event listeners, but it's not supported everywhere.
Alternatively, you can put an absolutely positioned transparent image over the video part of the player, and use JS (or an tag) to turn it into a link to elsewhere, while leaving the controls uncovered. I would test this thoroughly, and it may not work as expected on older IE versions.
Related
I am currently working on a google chrome extension that features a content script for altering youtube pages. I have done some work with altering the DOM already and all of that works, however, I have been looking for solutions to have the youtube video pause when the page loads.
I initially thought perhaps I could simulate a keystroke as the spacebar pauses youtube videos. I also tried using javascript to pause the video but I don't think it works with Youtube's custom video player.
Don't feel obligated to write any code for this but if someone could point me in the right direction I would be very grateful.
On the main page of a video, the HTML5 video element playing the video has a specific class, so you can target that; and as an HTML5 video element, it has the play() and pause() methods already.
document.querySelectorAll('.html5-main-video').forEach(vid => vid.pause());
That will pause all HTML5 main videos on the page. Helpfully enough, that's the same class used by the little autoplaying video on some channel pages, so it should work for those as well :)
(Don't worry about Flash videos; YouTube hasn't supported those for years now.)
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 looking to add some videos to my mobile webapp. For the best UX, I'd like to avoid having a simple static video-tag. (because its in an element which is webkit animated and video + webkit animations don't always play nicely together in my experience.)
Rather, I'd like to have an image (with a play icon on it) to "link" to the video. Mobile YouTube (as seen on iOS) have done this very nicely where when you click the image, the video seems to "pop" up to fullscreen and plays. How do they do this? Is it a link? A previously hidden video-tag? Some webkit-animation to do the "popping"?
I snooped around using Chrome Inspector (+user agent switcher to iphone4) but the videos don't play on the desktop browser, and the code overall looks quite complex..
Can you help?
What you can do is on-click of the video thumbnail, you can load the video url using the object/embed tags. In IOS, whenever a video starts playing it automatically plays it in fullscreen(feature of IOS itself)
I believe you can do something similar to this on certain browsers (e.g. WebKit.)
Is there a way to show the controls after a video has started playing. Basically, I'm playing a video with play(), and I want the controls to stay up for a few seconds. Currently (at least on my Android device), the controls fade once the video starts.
Toggling the controls attribute doesn't work, unfortunately.
HTML5 video on Android (iOS too) is not opened inline but in the native player (i.e. outside the browser), so the <video>-tag attributes have no control over what is going to happen in the player.
I don't know if it's possible to "hack" / set-up the native player so I guess you'll have to do research on that. I don't know of any way to remotely influence the behavior of the Android application unfortunately. In case you find out something it would be nice if you could let me know btw.
Also see a recent question of mine (which is rather discouraging unfortunately).