Full control of your YouTube videos

Add YouTube videos using an iframe tag

By default, YouTube let's you embed videos using an iframe. On the YouTube page just click share and select embed video. Copy and past the code in your website. That's it.

Embedding a YouTube video using the default YouTube embed option has several advantages, but it also comes with c ertain limitations. Here are some of the key limitations:

• Limited customization:
  The default YouTube embed option provides limited customization options. While you can adjust the video size and enable or disable certain features like controls and annotations, you have limited control over the player's appearance.

• YouTube branding
  When you use the default YouTube embed option, the YouTube logo and branding may be visible on the video player. This can be distracting and may not align with the branding of your own website or content.

• Privacy concerns
  The default embed code may include features that track user data, such as cookies. This can raise privacy concerns, especially in regions with strict data protection regulations. Users may have privacy preferences or restrictions that affect their ability to view embedded YouTube videos.

• Advertisement display
  If the video owner has enabled advertisements on their videos, these ads may appear when the video is embedded. This can affect the user experience on your website, and you have limited control over the type and content of these ads.

In the example below we simulate the default behaviour when embedding YouTube videos.

Responsive YouTube videos using a video container

By wrapping the default video within a custom video container, we gain more control over how the video is shown on the website.

In the example below we've added a video container to make the video fully responsive.

Embed YouTube videos using the built-in TypeStack video player.

Instead of copy/pasting code in your website, you can also just use the YouTube URL or the YouTube video ID and pass it to the built-in video player.

This way TypeStack will display your YouTube video, but gives you full control about playback options and controls.

Okay, the following plugins suck:

• VideoJS
  Nice themes, hard to implement being to abstract, plugins suck.

  videojs.com
  ableplayer.github.io/ableplayer/demos/

• Ableplayer
  Works nice, styling is crap, not fully compatible with Vimeo (double controls)

  ableplayer.github.io/ableplayer/
  ableplayer.github.io/ableplayer/demos/

• Media element
  Sounds promising, pain in the ass to get working.

  mediaelementjs.com
  github.com/mediaelement

Since all plugins are hard to implement correctly, we've taken a different approach with the following requirements:

• One uniform skin (must be easy to style)
• Should support full screen (backgrounds)
• Sources: local, YouTube and Vimeo

Best example found (with both YouTube as Vimeo variant):
github.com/pupunzi/jquery.mb.YTPlayer/wiki
pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html

In the example below we simulate the default behaviour when embedding YouTube videos.