Responsive YouTube Embed

YouTube URL

Replace the URL below with whatever YouTube video’s URL you want to make responsive embed code for.

Embed Code

You can select and copy the code below to embed this responsive video in your site.

Example Embed

If you resize the window you will see the video change in size according to the width of the page.

How It Works

The reason this all works is due to the fixed aspect ratio of the YouTube video player and how padding percentages work in CSS.

YouTube Video Aspect Ratio

YouTube always shows videos in a 16:9 aspect ratio.

CSS – Padding Percentages

According to MDN, percentages used for padding “refer to the width of the containing block.”

Combining What We Know

Keeping all of this in mind we first create a container element which will maintain the 16:9 aspect ratio.
{{code.replace(/iframe.+iframe/, '!-- EMBED IFRAME CODE --')}}
  • We use position: relative knowing that the <iframe> is later going to need to have position: absolute.
  • Our padding-bottom: 56.25% comes from our aspect ratio because 9 ÷ 16 = 56.25%.
Now let’s add the embed code (<iframe>):

We use position: absolute; top: 0; left: 0; width: 100%; height: 100%; to make sure that the <iframe> fills the entire container (including the padding).

Concluding Thoughts

You can use this same train of thought to make embeddable videos from any site responsive if you want. The one thing you need to know before hand is the aspect ratio. As long as you know the aspect ratio you will be able to calculate the padding-bottom of the containing element. Happy coding! 😎

Web Audio API – Controlling Audio/Video Loudness

After my previous post about getting more volume with the Web Audio API , I decided to look into controlling the loudness of audio tags and video tags in a more straight-forward (prototypal) way. That’s when I came up with the following JS prototype:

Prototypal Functions

The following are all of the methods associated with each instance:

  • MediaElementAmplifier#getContext()
    Returns a reference to the associated AudioContext.
  • MediaElementAmplifier#getSource()
    Returns a reference to the associated source node.
  • MediaElementAmplifier#getGain()
    Returns a reference to the associated gain node.
  • MediaElementAmplifier#getElement()
    Returns a reference to the media element that was passed in to instantiate the MediaElementAmplifier.
  • MediaElementAmplifier#getVolume(opt_getPerceived)
    Returns the volume. If opt_getPerceived is true-ish, the returned value will be the volume multiplied by the loudness.
  • MediaElementAmplifier#setVolume(value, opt_setPerceived)
    Sets the volume to the specified value. If value is greater than 1, the loudness will be modified accordingly and the real volume will be set to 1.
  • MediaElementAmplifier#getGainValue()
    Returns how much gain is used for the audio of the instance’s media element.
  • MediaElementAmplifier#setGainValue(value)
    Sets the gain used for the audio of the instance’s media element.
  • MediaElementAmplifier#getDecibels()
    Returns how many decibels the audio of the instance’s media element will be playing at.
  • MediaElementAmplifier#setDecibels()
    Sets how many decibels the audio of the instance’s media element will be playing at.
  • MediaElementAmplifier#getLoudness()
    Returns a number indicating how loud the audio of the instance’s media element is playing compared to normal. 1 is normal.
  • MediaElementAmplifier#setLoudness()
    Sets a value indicating how loud the audio of the instance’s media element will be playing.

How To Use It

Here is an example of how this can be used in the wild:

In addition to what is done in this simple example you can use the other instance functions to get and set the different values associated with the gain value and the volume.

Reference Material

I was able to come up with this solution thanks to the following page:

Happy coding! 😎