I have looked around the internet for a method to remove the YouTube logo from their iFrame player.
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>
which removes the 'watch on YouTube' button from the bottom actions panel however it adds the YouTube logo watermark to the bottom right of the video and when I hover over it says watch on YouTube.
I have tried changing 'embed' to 'v' which removes it but then it doesnt work on iPad/phone.
Any suggestions?
As far as I know, the most you can do is to add the modestbranding=1 option to the URL, but this only gets rid of the title and youtube link on the top of the player.
I don't think you can get rid of the bottom right one that appears when you hover.
Source: https://developers.google.com/youtube/player_parameters#modestbranding
You can upload it from google drive!
If you use modestbranding=1 you can't use showinfo=0. You can only use 1 or the other. Also, if you use modestbranding=1 it must come first right after the url.
Example:
https://youtube.com/embed/vidid?modestbranding=1
Related
I'm trying to embed vimeo videos as iframes. I'm using the following code:
<iframe width="1140" height="570" src="https://player.vimeo.com/video/553469759?autoplay=1&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
It works fine when I paste it in a codepen or try it in firefox. It doesn't work in chrome for me though. When I inspect the iframe's HTML, I can see that vimeo adds a class no-fullscreen-support, it also added these classes though:
js-player-fullscreen
with-fullscreen
Figured it out on my end. It was due to the Permissions-Policy being set by Nginx in the header. In my instance of Nginx, it was originally set to this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
The culprit in this case was fullscreen=(self) -- it was telling Chrome that unless the code originated from the site, it shouldn't allow full screen. As Vimeo's iframe is being loaded from player.vimeo.com, Chrome saw that as a third party and wouldn't allow it. Removing that from the Permissions-Policy so it looked like this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),payment=()";
Resolved the problem. The button is showing fine now.
For those using Apache, it'd probably look like this:
Header always set Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()"
The same principle applies, just remove fullscreen=(self).
You might also see it mentioned as Feature Policy, same thing, it's just called Permissions Policy now.
You can learn more about Permissions Policy here: https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md
From Vimeo Help Center:
The fullscreen button will be hidden from the player in scenarios where fullscreen mode cannot be activated. Here are some common causes:
First and foremost, check the Embed tab. Make sure the fullscreen button is toggled on under the Controls section
The iframe embed code is missing the fullscreen attributes: "mozallowfullscreen,""webkitallowfullscreen," and "allowfullscreen." If you’re pasting your embed code into another application, make sure these values are being retained.
The player iframe is contained within another iframe that is missing the fullscreen attributes. Browsers do not allow iframes to enter fullscreen if they are contained within other iframes without these fullscreen attributes. - Try inserting the player outside of the container iframe or adding "mozallowfullscreen," "webkitallowfullscreen," and "allowfullscreen" to the container iframe.
The iframe is contained within a frame. Frame elements cannot enter fullscreen, and neither can any iframes inside of them. We recommend removing all frame tags from your page’s source code.
If you're not sure if the above cases apply, please contact us, and we’ll investigate further. Be sure to include a link to the page where the video is embedded, so we can take a closer look at your page's source code.
You should add these tags to the element:
webkitallowfullscreen mozallowfullscreen allowfullscreen
what if you just download the video and upload it somewhere like github?
And then use the tag to embed the video?
<video src="protocol://someurl.domain/path" muted autoplay width="1140" height="570"></video>
If vimeo doesn't allow downloading you can always use third-party tools like savethevideo.com
i need some help. I have seen on many different websites that they have changed the color of the youtube video menu.
this one
i dont know how to change the color.
my code.
<iframe width="760" height="428" src="https://www.youtube.com/embed/92HOgzQvtOw" frameborder="0" allowfullscreen></iframe>
if you know how to change color please write a comment i have been searching everywhere and i have not found an asnwer. hope i can get one here :)
thank you
EDIT: This answer is deprecated since YouTube has changed how their player works. I'll try to update this answer when I can.
You can change it by specifying color when you embed a Youtube video as mentioned in their documentation here.
color (supported players: AS3, HTML5) This parameter specifies the
color that will be used in the player's video progress bar to
highlight the amount of the video that the viewer has already seen.
Valid parameter values are red and white, and, by default, the player
will use the color red in the video progress bar.
Unfortunately it seems AS3 and JavaScript are deprecated now so you will have to use the Youtube Iframe embed API. They have documentation I linked about and I believe you would go about setting up by simply making the embed link have the color parameter i.e.
https://www.youtube.com/embed/M7lc1UVf-VE?color=white
<iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?color=white" frameborder="0" allowfullscreen></iframe>
If you want a CUSTOM color... I believe the only way is creating a custom progress bar (along with all the video controls because the two are tied together. That is a little more extensive. I feel they purposely they did this so the player can stay true to the original brand. You can however do something with the API because you have access to player.getVideoLoadedFraction() and player.getCurrentTime()
Playback status
player.getVideoLoadedFraction():Float Returns a number between 0 and 1
that specifies the percentage of the video that the player shows as
buffered. This method returns a more reliable number than the
now-deprecated getVideoBytesLoaded and getVideoBytesTotal methods.
So if you really wanted, you can customize your own progress bar by feeding it in values with JavaScript.
Try to add ?theme=light to the YouTube URL.
I googled a little bit and found this website: https://www.reembed.com
And here's even more help. It seems that you might have to use the YouTube API to get what you want: http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/
Maybe that could help you out?
Here is my embed code:
<iframe width="1920" height="1080" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
And here's how it's showing.
The video upload is 1080p and the poster image was chosen from the video (though I had the same issue with one that was a custom image) so I'm not sure what's missing.
Yes, this appears to be across all YouTube embeds. If it really bugs you, like it does me, I'd suggest showing the thumbnail and then swapping it out on click to the video with autoplay on. I wrote about doing this using jQuery years ago here: start/play embedded (iframe) youtube-video on click of an image
Your thumbnail is avaialble at: http://img.youtube.com/vi/YOURVIDEOID/maxresdefault.jpg
I was tidying up an AngularJS YouTube directive when they made this switch and I spent half an hour trying to figure out what I'd done to create that black border around the thumbnail until I looked around the internet at other embedded videos and noticed that it was YouTube system wide. Heh.
No idea why YouTube decided to do this, it looks horrible.
Try setting the iframe size using css, initially inline like this:
<iframe style="height: 1080px; width: 1980px" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
If this works, neaten it up by giving the iframe an id and then add the dimensions as a rule to the external css file.
I want to use the Charmless youtube player in my application and I want to remove youtube logo from the Player. How can i achieve this thing? My application is developed using AS3.
Simply add ?modestbranding=1 to the end of your URL.
See more here.
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.
try this API player code.
http://www.youtube.com/apiplayer?version=3&modestbranding=1&showinfo=1
Chromeless player, the modestbranding has no effect unless "showinfo=1" is must for API player.
I tried to remove youtube logo by many ways. But I didn't get success to remove it from the youtube player.
Finally I check the youtube player functionality and behavior. When video is attached to the player then it will be displayed in center. if player container height is bigger then video height so both (top and bottom) side Black strip will be appeared. Just we have to hide the Black Strip from the user display area using masking concept. (In Flash we can apply the mask to container and same thing will be done using the DOM model in Javascript.)
In directly it will be removed as per end user perspective not actually. so Indirect way youtube logo is removed from the player.
you can try GKPlugin this plugin using JWPlayer 5.x at:
https://drive.google.com/folderview?id=0B0OhZLpuvlSRTDZLMXowQWNMZTA#list
I have a website that has a huge background image. I need to put a flash player at the top of the website, and I just realized that each page they click on is a new page, and thus restarts the Flash player. So I would like to put that flash player in an iframe so it will continue to play throughout the user surfing.
But my issue is will the iframe cover the background image and not be underneath? Or will the background image of the page (not iframe) go nicely underneath the iframe and no one will be the wiser of my methods? Any help would be greatly appreciated.
Firstly what you want to do is put your individual pages contents into an iframe (not the flash video) as this is what you want to update. You want the flash to be on the actual parent page so it always remains the same. (or put both in seperate iframes and only update the content iframe).
In regards to your question about the iframes background you can make it transparent so that the background is still visible through it.
To do this set the ALLOWTRANSPARENCY property to true on your iframe e.g.
<iframe width="100%" height="500px" name="content" src="home.html" frameborder=0 allowtransparency="true"></iframe>
And then in the pages which are going to be contained in the iframe set the body's background to be transparent:
<body style="background-color:transparent">
Iframes are bad, and take with them all the shitty stuff about frames (google "why frames are bad" if you want some reading).
What you should be looking at is some AJAX-techniques. JavaScript frameworks like Dojo and jQuery have lots of functionality you could check out. This will enable users to do things like vote, add to favourites or comment while the movie is playing - pretty much like Youtube.
It all depends a little on what you've got running underneath your HTML-pages though. Could you provide some more information about that?