I came across this site: https://hinge.co/ and tried to follow the HTML/CSS to find out how they have the fluid, responsive HTML5 video background.
I came across several properties which I don't understand, for example:
max-width: calc(177.778vh);
height: calc(56.25vw);
I understand this is a JS plugin they're using, and the values in calc are dynamic. But why would the vh height be more than 100? Wouldn't that be bigger than the viewport itself? The video seems to be the exact viewport size so I don't understand the logic here.
Has someone created something like this before and can help understand how this is done?
I've checked the code and those two particular lines are not doing much more than constraining how zoomed in the video should be.
What does the trick is
min-height: 100vh;
min-width: 177.77vh;
which guarantees the video will cover the entire screen and more, regardless of the videos size/shape (vertical or horizontal).
I came across this site: https://hinge.co/ and tried to follow the HTML/CSS to find out how they have the fluid, responsive HTML5 video background.
They didn't use the HTML5 video element. They embedded the video from Vimeo then positioned it with the CSS.
I understand this is a JS plugin they're using, and the values in calc
are dynamic. But why would the vh height be more than 100?
They probably did it to keep the aspect ratio of the video correct in any screen size.
Wouldn't
that be bigger than the viewport itself? The video seems to be the
exact viewport size so I don't understand the logic here.
It overflows the wrapper. Which has overflow as hidden.
Similar Example: https://startbootstrap.com/snippets/video-header/ (Not exactly same but HTML5 Video Element used here for video background)
HTML Video element on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Can anyone show me an example of the code used to place video on a canvas with javascript. I just need a video that loops, with a play/stop button. Thanks.
Canvas tag and KineticJs lib aren't make to place a video (you can always set each frame, but this is quite dirty, however you can see example here : javascript video canvas).
Better use the html5 video tag instead. You can see all that you need for this here :
http://www.w3schools.com/html/html5_video.asp
I am using
<iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
This removes right side bottom "Youtube" Logo.
And also removes "Title bar" which appears on hover.
But in this problem is, When I hover on video then behind the right side bottom "Youtube" tumbnail / Text is coming and when I remove mouse then it disappears.
When I use "autohide=1" then control bar gets hidden and in the right-bottom corner there is one icon/image/logo of "Youtube" display on hover. I am using
iframe.setAttribute("src", "youtube.com/embed/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;rel=0;");
this. With this I am able to remove/hide Title bar and logo from the control bar but on right-bottom there is one other logo comes on screen on hover , which parameter should I use to hide that?
You can add ?modestbranding=1 to your url. That will remove the logo.
modestbranding (supported players: AS3, HTML5)
This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.
&showinfo=0 will remove the title bar.
showinfo (supported players: AS3, AS2, HTML5)
Values: 0 or 1. The parameter's default value is 1. If you set the parameter value to 0, then the player will not display information like the video title and uploader before the video starts playing.
You can find all options on the Google Developers website.
Note:
It doesn't fully remove the logo. There is still a small logo on the bottom left.
showinfo is deprecated and will be ignored after September 25, 2018: https://developers.google.com/youtube/player_parameters
It turns out this is either a poorly documented, intentionally misleading, or undocumented interaction between the "controls" param and the "modestbranding" param. There is no way to remove YouTube's logo from an embedded YouTube video, at least while the video controls are exposed. All you get to do is choose how and when you want the logo to appear. Here are the details:
If controls = 1 and modestbranding = 1, then the YouTube logo is bigger, is on the video still image as a grayscale watermark in the lower right, and shows when the play controls are exposed as a big gray scale watermark in the lower right. example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=1&&showinfo=0&modestbranding=1" frameborder="0"></iframe>
If controls = 1 and modestbranding = 0 (our change here), then the YouTube logo is smaller, is not on the video still image as a grayscale watermark in the lower right, and shows only when the controls are exposed as a white icon in the lower right. example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=1&&showinfo=0&modestbranding=0" frameborder="0"></iframe>
If controls = 0, then the modestbranding param is ignored and the YouTube logo is bigger, is on the video still image as a grayscale watermark in the lower right, the watermark appears on hover of a playing video, and the watermark appears in the lower right of any paused video. example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=0&&showinfo=0&modestbranding=1" frameborder="0"></iframe>
Youtube have removed the ability to completely remove a YouTube link form an embedded YouTube video.
https://developers.google.com/youtube/player_parameters#modestbranding
Even by removing the showinfo section YouTube places a semi transparent logo in the upper right hand corner of a paused video.
Since August 2018 showinfo and rel parameter doesn't work so answers which recommend to use them no longer works and modestbranding do not remove all logos
here is my tricky solution how to hide EVERYTHING
Before you start you should realize that all youtube's info are sticks to the top and bottom of iframe(not video, that's important)
Make iframe higher than the real video height. In iframe parameters set height = width * 1.7 (or other multiplicator)
Hide youtube's info under your header and footer with an absolute position at the top and bottom of iframe wrapper element. Height of header and footer could be calculated as: iframeHeight - (iframeWidth * (9 / 16))) / 2. If you want fullscreen than you should hide it outside screen visible zone and set overflow to hidden. (9/16 it is standard video screen size proportions, you could change it into yours)
In my case I use JS to destroy iframe after the video is finished so the user couldn't see youtube's offer with other videos
Also important note: since iOS 12.2 is replacing Youtube's player with their own, width and height calculation should be done in the constructor(in the case of React) because iOS player arrival cause page resize ->possible width&height recalculation-> video rerender -> video pause
code example jsfiddle.net/s6tp2xfm
A disadvantage of this solution is that it stretches image placeholder.
that's how it could look like with custom controls
Remove YouTube Branding
To date: Seeing a lot of searches and suggestions to disable YouTube logo and branding from an embedded video; I recommend you consider the following:
I guess YouTube don't want you to do this otherwise they would allow that at their front end.
Some brands spending huge efforts to provide the media not for a 5 min. removal.
It's good to have the logo and respects brands rights.
You still have the video and the luxury of embedding it in your site/blog.
Spare some of your time; that is not possible.
Yet! You have the option of having Modest-Branding using this parameters:
https://www.youtube.com/embed/'+videourl+'?modestbranding=1
And some other parameters for customization:
&showinfo=0 //Turn off Title & Ratings
&showsearch=0 //Turn off Search
&rel=1 //Turn on Related Videos
&iv_load_policy=3 //Turn off Annotations
&cc_load_policy=1 //Force Closed Captions
&autoplay=1 //Turn on AutoPlay (not recommended)
&loop=1 //Loop Playback
&fs=0 //Remove Full Screen Option (not sure why you’d want to)
And here is the general customization window:
Disclaimer: I don't work for YouTube; simply I respect the copyrights.
Yes It it True
1)By modestbranding=1 to your url. That will remove the logo that is appered in bottom lest as branding and
2)By &showinfo=0 will remove the title bar.
But I think You Can not Remove Both Think together
Just try Both thnik hear
http://codegena.com/generator/Youtube-Embed-Code-Generator
1) when try hide logo
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1"frameborder="0"></iframe>
2)Now try to hide topbar
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&showinfo=0"frameborder="0"></iframe>
==>But Now When We try to hide Both Information See the Limitation
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1&showinfo=0"frameborder="0"></iframe>
It would be Better if you can use html5 video player or any other player (but not jwplayer) which can play youtube source video.
Below is an example source url of a video:
https://redirector.googlevideo.com/videoplayback?requiressl=yes&id=a1385c04a9ecb45b&itag=22&source=picasa&cmo=secure_transport%3Dyes&ip=0.0.0.0&ipbits=0&expire=1440066674&sparams=requiressl%2Cid%2Citag%2Csource%2Cip%2Cipbits%2Cexpire&signature=86FE7D007A1DC990288890ED4EC7AA2D31A2ABF2.A0A23B872725261C457B67FD4757F3EB856AEE0E&key=lh1
Open this using simple html5 video player (Replace XXXXXX with source url or any downloadable url) :
<video width="640" height="480" autoplay controls>
<source src="XXXXXX" type="video/mp4">
</video>
You can also use many other video players also.
autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&modestbranding=1&controls=2&showinfo=1
That worked for me, it still showed subscribe and it showed share link, but no youtube button to take them off the page to another. So that's the line I will use that I think will keep traffic my site and not take off to all the other sites.
That watermark in the bottom right only appears on mouseover. There's no parameter to remove that, however if you stack a transparent div on top of the video and make it a higher z-index and the same size of the video, your mouseover will not trigger the watermark because your mouse will be hitting the div.
Of course the tradeoff for this is that you lose the ability to actually click on the video to pause it. But if you want to leave the ability to pause it, you could display the controls and have the top layer div cover up until the bottom 30 pixels or so, letting you click the controls.
If, like me, you would just prefer people didn't click out to youtube using the logo, one option is to use a player like jwplayer. Using jwplayer the logo is still there just unclickable.
I tried this, but it is not possible to remove "Watch on YouTube" icon. Following solution of mine does not remove the icon itself but "blocks" the mouse hover so that watch on YouTube is not click-able. I added a div over icon, so no mouseover will be affected for that logo.
<div class="holder">
<div class="frame" id="player" style="height 350"></div>
<div class="bar" id="bottom-layer">.</div>
</div>
Where frame is my embedded player.
include following to your css file
.holder{
position:relative;
width:640px;
height:350px;
}
.frame{
width: 100%;
height:100%;
}
.bar{
position:absolute;
bottom:0;
right:0;
width:100%;
height:40px;
}
This is not full solution but helps you if you are bothered with users' getting full youtube url.
The only way to remove the YouTube branding (while keeping the video clickable) is to place the embed iFrame inside a container that has overflow set to hidden and has a slightly smaller height than the iFrame.
Of course this means the bottom of your video gets chopped off.
Also, you will be most likely breaching YouTube's Terms of Service.
CSS:
.videoWrapper {
width: 550px;
height: 250px;
overflow: hidden;
}
HTML:
<div class="videoWrapper">
<iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
Ok so I need to have a video load full screen as an intro to a website. Can I do this in HTML5 or do I need to use flash?
Can someone please explain or point me to some good resources on how to do this.
I need to website to load and the 5 second clip to play through with no player controls or anything and then go straight through to the main site.
Exactly like this example: http://www.firecrackerfilms.com/
Thanks :)
If you need to set a background video try this
Use position:fixed on the video, set it to 100% width/height, and add a negative z-index on it so it appears behind everything.
If you look at VideoJS, the controls are just html elements.
HTML
<video id="background" src="video.mp4" autoplay>
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
The page in your example isn't full-screen, nor is it even full-viewport, it's a small video with a black background that blends into the page's black background. If you can get away with doing that, that will work.
If you care, you will never be able to auto-play an HTML5 video intro on iPad, because iOS inhibits autoload and autoplay unless they are triggered by a finger touching the screen. But then again, it can't play Flash anyway.
If you want an HTML5 video to be full-viewport, for, say, a 16:9 video viewed in a 4:3 monitor, you will make the video full-height and lose the sides of the video. Similarly for the reverse case. This will maintain the video's aspect ratio with the caveat that you lose part of the video content to hidden overflow.
If you don't care about aspect ratio, you can make the video height: 100% and width: 100%, as #coder suggests.
For this reason, it's probably easier to go with what they did on your example site, and make the video blend into the background.
Here is a nice thread about html5 vs flash video and the pros and cons:
HTML 5 <video> tag vs Flash video. What are the pros and cons?
Personally I would prefer html5 because you can watch videos on almost every device type like iphone or ipad and so on).
But html5 is not as powerful as flash videos.
You should also consider that some users have disabled javascript or flash configuration in their browser.
I don't think real fullscreen is possible with a user requesting it. At least in flash it's not possible.
If you mean to fill the whole viewport then it can be done by using css to size the video element with the caveat that if you set width and height to something that doesn't match the aspect ratio of the video, the video is not stretched to fill the box. Instead, the video retains the correct aspect ratio and is letterboxed inside the video element. The video will be rendered as large as possible inside the video element while retaining the aspect ratio.
I have a website that runs on WordPress. There is a DIV in the header that contains an embedded QuickTime video (controls are turned off and need to stay like that). I have an image that is supposed to go over the video, and when the user clicks on it, the video should be revealed and play.
I think that if I messed around with the CSS and Javascript for long enough, I could make the image go away and revel the embedded video when clicked on, but I don't know how to make the video start on that same "onclick" event. Another note here: I prefer to use jQuery to do this, since that's what I usually work with. But whatever works works.
This is driving me crazy because I can't find any good information on how to do this! Thank you so much in advance for helping me out.
If you already have a DIV that contains the video, you can create another same-sized DIV that contains your image. Finally, set the image DIV with higher z-index and float it over the video DIV.
I think this should work.
There's really no good way to do this when rendering the video using the QuickTime plugin. Plugins are optimized for performance and typically render above the rest of the "native" elements within your page.
I seem to recall there's a wmode="transparent" attribute or "opaque" that was introduced recently to the plugin similar to what's used with the Flash plugin, but the performance will typically suffer because the plugin renderer will often need to switch to rendering in software as it composites the video with the element you have on top of it, and possibly elements beneath it as well.
The easiest thing to do is to simply use a video element to play the media you want on your page. At that point it is an element like any other on the page and interacts seamlessly with the z-index ordering of positioned elements.
An example of the usage is here: http://dev.opera.com/articles/view/introduction-html5-video/
You may need to nest differently encoded videos as video elements in the page so various user agents with support for different codes can play the video. But just adding the video element and pointing it at your current QuickTime video will work as well as a simple object using the QT plugin.