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?
Related
I've tried multiple times to send out an email trying to get the YouTube video to appear within the email but however, I've had no luck.
I get this back:
I've tried using iFrame but turns out it doesn't support Gmail.
<iframe width="560" height="315" src="https://www.youtube.com/embed/w_Da75XbPBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I'm trying to replicate what Youtube uses when it sends out subscription emails containing the video link.
I've also tried object and embed but neither of them appear when I send the email out.
edit; I'm trying to replicate this (the portion in red redirecting to Youtube if clicked on):
The world of coded emails is an interested one.
For starters, you can't send javascript elements through an email, for security reasons, I'm sure you know this but I wanted to cover my bases.
Also, consider what css you're using. Emails can only support a limited number of css options and all css must be inline (you can't use the element). Also maybe read up on email support for html and css as a whole (check out this super awesome link).
It looks to me as though YouTube isn't actually embedding the video, which others have mentioned (at least, they aren't embedding the videos in the way we are used to). Rather they are taking the thumbnail image from their database and then stylizing it (with video length and such) to make it look like an embedded video.
While you don't have access to the YouTube thumbnail database, I'm assuming you want to send links of your own videos to others? Just host the thumbnails, of whatever videos you want to send, on your server and then link to it with a simple '> and then use some styles.
Playable video in email isn't well supported. If you're looking to mimic YouTube's own implementation of a video link, make a larger thumbnail of the video, maybe overlay the play button and link the image directly to the YouTube link.
Try using Outlook if you can. Below are step-by-step instructions.
Click on the quick access toolbar and select More Commands
Choose Attach File
Click the Add >> button, then select Attach File
Select your HTML file
Then, instead of just hitting done, make sure to change Insert to Insert as text
Then, Outlook will format your email. However, Outlook will ignore the <iframe> element.
So if you really need it, try this Chrome extension.
Source: https://www.linkedin.com/pulse/how-insert-html-source-code-outlook-emails-maurizio-la-cava/
It depends on email client. I doubt if any support video-embedding directly into email document due to security reasons. I suggest you to use Image instead. Create a Video thumbnail image, and make it a hyperlink to your video.
The closest thing you can do (to my knowledge) is to attach the video. If you insert the video link, it will send the video as an attachment which can be watched from within the email. Apologies if this isn't what you want, but I don't think there is a better way.
We have embedded player on our site.
VTT French captions were been uploaded.
We need the captions to be activated by default.
Currently its not happening. The captions are available, CC button is there, and we can switch them ON while playing. But we do want the captions to show automatically.
The embed code is as follows:
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/[videoid]?texttrack=fr" frameborder="0" allow="autoplay" allowfullscreen></iframe>
According to Vimeo' docs texttrack=fr is what should make the captions to show automatically.
The video has language set to English.
Any idea on how to solve our problem?
I was able to find an answer.
For those who faces the same issue: make sure that language in the embedding code matches the language selected, when captions were uploaded within Vimeo.
Embed code we had was texttrack=fr, but captions were uploaded as Language - French (Canada).
We changed to texttrack=fr-ca and all is good now.
You may also need to play with type of data you upload: Subtitles or Captions
Just wanted to add that at this point in time, Vimeo language variables are case-sensitive and "texttrack=fr-ca" does not work. But "texttrack=fr-CA" does work. Vimeo has identified this as an issue and may make the variable non-case-sensitive in the future.
This question (only similar Q on S/O) was answered in a perplexing haywire back in 2012: YouTube force 480p embed link
It briefly covers using &vq=small to load 240p, as so:
<iframe src="//youtube.com/embed/FqRgAs0SOpU?rel=0&vq=small" width="560" height="315" frameborder="0" allowfullscreen></iframe>
It is said in the answers that &rel=0 was also required at the time.
The Problem: It is also said that if the video isn't available in the chosen quality, it will load the default (usually 720p).
There are also other keywords, such as &hd=0 and &fmt=### to choose the codec & quality.
It is also known that changing the iframe's width and height will tell YT which quality to use.
Question: First of all, which parameter (or combination of) is right?
More specific Question: How do I tell Youtube, in a URL, to use the lowest quality possible, regardless of connection speed, screen size, or any other circumstance?
Extra: What is the URL parameter for 144p? Proof: Screenshot of Youtube App
Also, this is Google Dev's YouTube URL parameter reference, here
Thanks for any input.
The parameter "&afmt=55" plays a video with "55 kiloBytes per second" (very low quality).
Sample:
https://www.youtube.com/watch?feature=player_embedded&v=qGAwWOfaXTo&afmt=55
My problem is that I need to have 1 video player on the website for my project on school (new to this stuff!) but it needs to be able to play 2 videos (depends on the one you select from the drop down menu above the video player) but I have no idea how to make that possible.
The first video is called: video_1 (mp4 format and also have a ogv format for opera)
The second video is called: video_2 (mp4 format and also have a ogv format for opera)
they both are in a map called: video (just giving that for the code)
So.. Could anyone please help me out with this?!
thanks in advance
You need something as simple as this:
<div id="videoDiv">
<video id="video"
width="480" height="360"
controls>
<source src="video/video_1.mp4">
</video>
</div>
From this point - you only need to place your videos in a folder named "video" and a little JavaScript to change the source when the user changes the selection in the drop-down control.
There are different solutions here, but I think you should continue searching Google for answers. Learning things by experimentation is by far the best way to learn anything. But, you could redirect the page after the visitor changes the select option, like what is done here: Redirect automatically when selecting an item from a select drop-down list. (Don't forget to include the jQuery in your HTML-page). Or look for a function that changes a value in the body of your html with JavaScript/jQuery like the other answer suggests.
Hope this helps. We are here to help you learn, not help you with your homework ;)
There are a few methods suggested for doing this online, but none of them seem to work.
For example:
http://blog.makezine.com/archive/2008/11/youtube-in-720p-hd-viewin.html
That article is about making it start in 720p, but it doesn't even work on their own video.
Does anyone here know how to do it?
(This answer was updated, as the previous method using vq isn't recognized anymore.)
Specifying the height of the video will change the quality accordingly.
example for html 5;
<iframe style='width:100%; height:800px;' src='https://www.youtube.com/embed/xxxxxxxx'></iframe>
If you don't want to hardcode the width and height you can add a class to the iframe for css media queries.
Tested on a working server + passes the w3.org nuhtml validator.
You can do this by adding a parameter &hd=1 to the video URL. That forces the video to start in the highest resolution available for the video. However you cannot specifically set it to 720p, because not every video has that hd ish.
http://www.youtube.com/watch?v=VIDEO_ID&hd=1
http://code.google.com/apis/youtube/player_parameters.html
UPDATE: as of 2014, hd is deprecated
https://developers.google.com/youtube/player_parameters?csw=1#Deprecated_Parameters
Youtube doesn't support playback quality anymore
This is an embed example of video played in HD 1080.
<iframe width="560" height="315" src="http://youtube.com/v/IplDUxTQxsE&vq=hd1080" frameborder="0" allowfullscreen="1"></iframe>
Let's break apart the code:http://youtube.com/v/ video_id &vq=hd1080
Video id for that video: IplDUxTQxsE you will see this type of random code in the link of every YouTube video.
So far so good, this trick works for playing full HD videos directly on webpages!
You can change the quality to 720 too. &vq=hd720
I've managed to get this working by the following fix:
//www.youtube.com/embed/_YOUR_VIDEO_CODE_/?vq=hd720
You video should have the hd720 resolution to do so.
I was using the embedding via iframe, BTW. Hope someone will find this helpful.
The first example below does not work for me, but the second one does (in Chrome).
<iframe width="720" height="405" src="//www.youtube.com/embed/GX_c566xYcQ?rel=0&vq=hd1080" frameborder="0" allowfullscreen="1"></iframe>
<iframe width="720" height="405" src="//youtube.com/v/IplDUxTQxsE?rel=0&vq=hd1080" frameborder="0" allowfullscreen="1"></iframe>
I believe the first one uses the new HTML5 youtube player whereas the bottom one (which works) uses the older flash player. However, the second one doesn't seem to load correctly in Safari/Firefox etc so probably not usable.
2021 here is my answer that works.
https://youtube.com/embed/ZkTzXrczk5M?vq=hd720p;feature=oembed&controls=0&hd=1&modestbranding=1&autohide=1&showinfo=0
The secret is in placing a "p" e.g. ?vq=hd720p not ?vq=hd720, after your desired resolution on the of the src.
None of the above solutions seem to work if the width/height is less than the line resolution of quality you select.
For example, the following doesn't work for me in Chrome:
<iframe width="720" height="480" src="//youtube.com/embed/hUezoHa1ZF4?autoplay=true&rel=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
I want to show the high quality video, but not use up 1280 x 720 pixels on the webpage.
When I go to youtube itself, playing 720p video in a 720x480 window looks better than 480p at the same size. I want to play 720p in a 720x480 window (downsampled better quality). There is no good solution yet afaik.
In case you're still wondering how to do it, then add: &feature=youtu.be&hd=1
Actually now I checked, this works only when you're sending the URL to someone else, not on embed.
Use this, it works 100% _your_videocode?rel=0&vq=hd1080"