Youtube - How to force 480p video quality in embed link / <iframe> - iframe

How to force 480p video quality for iframed Youtube videos?
Sample code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/FqRgAs0SOpU" frameborder="0" allowfullscreen></iframe>

Append the following parameter to the Youtube-URL:
144p: &vq=tiny
240p: &vq=small
360p: &vq=medium
480p: &vq=large
720p: &vq=hd720
For instance:
src="http://www.youtube.com/watch?v=oDOXeO9fAg4"
becomes:
src="http://www.youtube.com/watch?v=oDOXeO9fAg4&vq=large"

You can also use for 1080 hd values:
240p: &vq=small , 360p: &vq=medium , 480p: &vq=large , 720p: &vq=hd720 , &vq=hd1080

I found that as of May, 2012, if you set the frame size so that the minimum pixel area (width • height) is above a certain threshold, it bumps the quality up from 360p to 480p, if you're video is at least 640 x 360.
I've discovered that setting a frame size to 780 x 480 for the embed frame triggers the 480p quality, without distorting the video (scaling up). 640 x 585 also works in this manner. I also used the &hd=1 parameter, but I doubt this has much control if your video is not uploaded in HD (720p or higher).
For instance:
<iframe width="780" height="480" src="http://www.youtube.com/embed/[VIDEO-ID]?rel=0&fs=1&showinfo=0&autohide=1&hd=1"></iframe>
Of course, the drawback is that by setting these static frame dimensions, you will most likely get black bars on the sides or above and below, depending on what you prefer.
If you didn't care about the controls being cut-off, you could go on to use CSS and overflow: hidden to crop the black bars out of the frame, providing you know the exact dimensions of the video.
Hope this helps, and hope the Embed method soon gets discrete quality parameters again one day!

You can use the YouTube JavaScript player API, which has a feature on its own to set playback quality.
player.setPlaybackQuality(suggestedQuality:String):Void
This function sets the suggested video quality for the current video. The function causes the video to reload at its current position in the new quality. If the playback quality does change, it will only change for the video being played. Calling this function does not guarantee that the playback quality will actually change. However, if the playback quality does change, the onPlaybackQualityChange event will fire, and your code should respond to the event rather than the fact that it called the setPlaybackQuality function. [source]

You can use the fmt= parameter and fill the value based on the following table :
http://en.wikipedia.org/wiki/YouTube#Quality_and_codecs
Ex : your URL would become :
http://www.youtube.com/embed/FqRgAs0SOpU?fmt=35

Related

Showing video stream at higher bitrate

I have a webpage where I can add multiple video streams and display them like a mosaic.
This looks like this:
The videos can be resized, but when they get too small, the bitrate will lower (the stream adapts to the size of the video) and artefacts start to become visible.
I was wondering if there was any way I could keep the videos at a fixed size (large enough to get a higher bitrate) while scaling them down for the mosaic.
I've tried using the CSS scale feature, but I couldn't achieve the desired outcome. Maybe it's not possible at all, but I'd appreciate any tips you might have (keep in mind that I'm unable the change the stream itself).
Thanks!

Background video - What is the best Frame size / Frame rate / Codec / File size?

Please, I need your help.
I'm dealing with a background video for our homepage. This section has 100vh and is full-width. I'm using DIVI as a builder.
We hired a professional videographer to record a video for us. Now he asks me what should be the ideal:
frame size
frame rate
codec
file size
I've done some research and it seems like that the ideals are:
frame size: 1280 x 720
frame rate: 30FPS
codec: I don't know
file size: the less the better
Please, does anyone have any experience with background video? I'm pretty lost.
Also, would you upload it in the WordPress media library or would you use Vimeo/YouTube? I think you can't use YouTube as a background video, correct?
Thanks a lot!
Frame size:
1280 x 720 (=720p) means HD quality, which is quite good, but it is rather up to you, what quality do you find acceptable. Often 1920 x 1080 pixel (=1080p, fullHD) is used for background videos, like my main background video source is https://coverr.co/ where you can download free videos, specifically made for the purpose of being background videos. Those are 1920 x 1080 big. I would say, if you can ask for multiple files, ask for both, 720p and 1080p quality to be able to make a good decision.
The file size is connected to this, so the smaller frame sized video you will use, the smaller file size you will get.
Frame rate:
You could take a look at this image:
https://miro.medium.com/max/1300/1*uMlkXIMNF4VIZoi85NZ3aQ.png
to see what it means.
Movies on blu ray, dvd and cinema use 24 FPS, so that should be enough for you too. Here as well, the lower FPS means less filesize.
Codec:
h264
I'm a WordPress plugin developer and we always suggest this, when our users cannot figure out how to create a video, that plays on all browsers. So far it worked out well for everyone.
YouTube vs Vimeo vs MP4:
By default you cannot make Youtube videos to be backgrounds. There are some coding tricks, which might works, but I wouldn't suggest it.
Vimeo only allows background videos for Pro Vimeo users.
Using mp4 is simple, and also it works better in mobile and tablet devices. Some devices are opening up their Vimeo/Youtube applications automatically, when a Vimeo or Youtube video is started on a website. This is quite bad and your page will end up without background.
You should also note, that most browsers (even on desktop) only allow you to play videos automatically, if you will mute the video in the html code:
https://www.w3schools.com/tags/att_video_muted.asp
What #Gabor said.
1080p (1920 x 1080) is a good resolution for desktop.
If your user is on a mobile or other small-form-factor device it would be good if you could have the choice of 720p (1280x720) or even 360p (360x640). Those will save data downloads and fit the smaller devices. Look for a plugin that delivers the appropriate size video. You'll need a video file for each resolution.
Or don't show background video on users' mobile devices.
In your design think through what will happen in portrait mode. You probably want to clip off the right and left sides of the video material, so the center part fills the screen. So, the action should be in the center.
Is this video huge? Does it play for many minutes? If not, you absolutely should host it on your own site. Why get involved with, and pay for, some third-party media service if you don't have to? If it's really large (> 10MiB or so) you probably should ask another question and give more details.
Put no audio tracks in your background video files. Browsers restrict the playing of audio in background video, so there's no need to make your files fatter with audio tracks that won't play. (If you have audio, consider hosting a separate file to send users who click on the video to view it; most users won't.)
Use .mp4 files with H.264 video in them (one file per resolution). Other stuff, like webm with vp8 video, might generate smaller file sizes. But they don't play in as many makes and models of browser (I'm looking at you, Apple Safari.)
The video, in H.264 parlance, should be coded in the so-called Constrained Baseline Profile. It saves power when played on mobile devices and works better on slower devices.
Ask your videographer to give you streaming mp4 files (also known as fragmented mp4): they can start playing as soon as the first frame is downloaded.
Ask your videographer for advice about file bitrate. Your 1080p files should look decent coded with variable bit rate with a target of one megabit / second (8 seconds per megabyte). Your lower-resolution files will need a smaller bitrate: that's the point of them after all. But, your bitrate may vary. Action/adventure movies need a higher bitrate to look good than do talking heads.
As #Gabor mentioned, 24 frames/sec should be fine. 15 frames/sec is marginal. Ask your videographer what looks best for the material they created for you. Sometimes material shot at 30 frames/sec looks choppy at 24. (The way H.264 video works, once you get below 24 frames/sec the savings in file size aren't as dramatic as you might guess. 15 frames/sec takes more than half the file size of 30 frames/sec.)

Fit more tracks than 8 in the Spotify Play Button widget

I have this site:
http://www.johnseabrook.com/playlists/
The problem is my client wants to show the full playlist (some have up to 15 songs). Right now it's limited to only 8 songs and a max height of 720px per Spotify. Is there a hack around this? I tried changing the Iframe height in pixels and percent to be larger but nothing has worked. Thank you in advance!!!
The way the Spotify Play Button works is that you actually need to increase the width as well, e.g.
<iframe src="https://embed.spotify.com/?uri=spotify:user:1215385803:playlist:1BSFYwDOOQEGCA71QUJJw9" width="720" height="1280" frameborder="0"></iframe>

How to convert an image to retina display?

I have an 40px by 20px image with 72 Pixels / Inch.
I would like to create a Retina display version.
What should I do? Double the size? Change the resolution?
And in which format should I save it? PNG? JPG? ...
I am using this image on a web site ...
In your image editor, double the size of your image to 80px by 40px.
In your markup set the width to 40 and height to 20.
<img src="example.png" width="40" height="20" />
You should save as png if you need transparency or the image is line art. Save photographs as jpg.
My answer is convert your image into SVG
Do you have Illustrator? If so save your image as SVG (and have a png as a fallback if you want).
<img src="images/logo.svg" alt="" />
<img src="images/logo.png" alt="" />
As long as you use Modernzr which can work to get svg friendly in most browsers.
You can see it here how it's done:
http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
Hope it helps :)
A retina display image (or high-density display image) is double the pixel size of a standard image - its scaling factor is 2.0. This means that yes, for your 40x20 pixel image, you will need to make an 80x40 pixel version (that is then displayed at double pixel density on screen). The format doesn't matter as much, both PNG and JPG will work fine (PNG will not degrade in quality with compression, but the file size will be larger than JPG).
However, the problem with high-density display images is that they take up more bandwidth, and are unnecessary for devices that don't have the high resolution or Retina displays. This means more data transferred over the network, inconveniencing mobile users and those with limited data transfer caps.
One solution is to use something like Retina.js. It's an open-source javascript client script that will automatically load the retina-sized image from your server and swap it in-place for the low-density version, if it exists. It follows Apple's standard for naming high-resolution images - #2x, so you can have HTML code like this:
<img src="/images/my_image.jpg" />
and the script will search your server also for /images/my_image#2x.jpg. If it exists, it will load it and swap it in-place without having to worry about messing with CSS.
Generally as of this writing there are two types of retina displays, hence you should create an image for each type.
For a 2× device, you would need to produce twice the logical pixels' width and height with a resolution of 144 pixels per inch (72 ppi ✕ 2).
For a 3× device, you would need three times the logical pixels with a resolution of 216 pixels per inch (72 ppi ✕ 3).
Examples of 2× devices are the MacBook Pro (released in 2012-2019) and most iPhone since the iPhone 4. Examples of 3×
devices are the iPhone 6 Plus, and the iPhone X. However the iPhone Xr is a 2× device.
Hence for your case you would need images in 80 px ✕ 40 px and 120 px ✕ 60 px for 2× and 3× devices respectively.
Retina displays are not dependent on the specific bitmap image format. You can use the original image format. For websites, you should use JPG for photographs and PNG for line-art graphics saved as bitmaps.
You should not just blindly enlarge images otherwise this would create a blurred results – it would no better than if you don't include any high-resolution versions in the first place. Either obtain the original higher-resolution version of the images (typically from vector graphic source) and downscale them or use a machine-learning based image enhancement solution such as Bigger Picture to "convert" your image into a higher resolution.
Photoshop gives you a couple options for resizing an image. For instance if the image is iPhone size you can increase the image size by 200%. Photoshop gives you a couple options for resampling of the image. Bicubic, bilinear and etc. This will remake the image at a higher resolution and interpolate the missing pixels. Hope this helps.
This is a really interesting article showing a nice option for dealing with high res images:
http://blog.netvlies.nl/design-interactie/retina-revolution/
Basically, it's saying that, if you make the image quite large (width and height) but then save it at quite low quality, it still comes out very sharp on retina displays. It means that you can use the one same image on all devices, and that the file size is very low, too, which is an extra bonus. You can set the width and height of the image in your CSS and/or HTML to set it to the visual dimensions you desire.
This article blew me away, and is my go-to approach for dealing with both retina-friendly and bandwidth-friendly images. Win, win.
You can use CSS opacity option.
This will give you an transparent look of your image based upon the value you set to opacity.
Try learning opacity: http://www.w3schools.com/css/css_image_transparency.asp

Flex VideoDisplay: setting the thumbnail on a video which hasn't been played yet?

I have an mx:VideoDisplay object in Flex, and I wanted to change the initial image which is displayed for the VideoDisplay for the source video. The reason being, the frame that is initially being shown simply looks too funny to be taken seriously? An alternative is to layer an image on top of the videodisplay and then just remove it from the stage once I have set the video to play, but I would like to avoid having to do that.
You can use states and show the image before playing the video and use timer to remove it after n seconds and play video.
I am not sure it its the correct way, but I implemented the same way, when I got the same requirement.
Let m

Resources