One moment, we're cooking some code examples

Header image

Have fun Kjell, let's create some previewless perfect examples. No code blocks, just full control and creative freedom.

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.

Checklist video requirements
Clean layout Lot's of options, pretty cluttered.
Full control No, can show advertisements or third party recommended videos.
Responsive Lacks responsiveness to varying screen sizes.

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.

Checklist video requirements
Clean layout Lot's of options, pretty cluttered.
Full control No, can show advertisements or third party recommended videos.
Responsive 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:

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.

Checklist video requirements
Clean layout Choose your own playback options.
Full control No, can show advertisements or third party recommended videos.
Responsive Fully responsive.