How to force YouTube Lowest Quality via Embed URL Parameter [2016] - html

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

Related

HTML5 video loading slow

I have videos on my website that are taking very long to load.
I don't think it is my webhost since it also happens on localhost.
Each time there is only 1 video shown to the user, depending which category they chose. (So it is not loading each video always).
The videos that take longer to load are the bigger ones (the biggest one is about 351MB video file)
This is my html code for the video:
<div class='video'><h2>$vidTitle</h2><video width='640' height='360' controls preload='metadata'><source src='$viddir' type='video/mp4'></video></div>
I've also read that it could be that the video indexing could be at the end, could this be the case?
What can I do about this, do I need to use another player thann the default html5 player (I tried this but it didn't really help) | do I need to use a cdn?
How can I solve this?
Thanks!
My understanding is that the preload='metadata' attribute in your video element is supposed to prevent the video from loading.
You could try preload='none' to test. I know that works.
As always, a good place to check is MDN web docs:
mdn web docs : The Video Embed element

Embedding Youtube Video in Email

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.

html change color on youtube video

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?

Embedded YouTube videos in native HTML5 mode and full screen

I know about the issues of HTML5 video and full screen in general. However, this is about embedded YouTube videos and using the YouTube default iframe embed code.
The context is me trying to answer my own question about seamless and sandbox for YouTube videos more in depth. Work has begun at a test page
(Note that form elements do not work at all so far.)
The thing is that currently I am not able to get any video to play in full screen, if I am signed in to the HTML trial. Attributes are therefore pointless.
Does anyone have up to date knowledge about YouTube's plans to provide full screen and if browser would allow it because of security restrictions or have a work around for the issue today?
I do not wish to enable full screen by default. The user must initiate it by him-/herself.
Using an alternative video player is currently not an option, since the purpose is to test YouTube's default code.
Add this to the end of your iframe src:
allowfullscreen
This should be your code:
<iframe width="500" height="500" src="https://www.youtube.com/embed/0U8VA-0SF5E" frameborder="0" allowfullscreen></iframe>

Force youtube embed to start in 720p

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"