One moment, we're cooking some code examples
Check out our showcase with som hot examples. Have fun!
Have fun Kjell, let's create some previewless perfect examples. No code blocks, just full control and creative freedom.
iframe
tagBy 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. |
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. |
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.
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.
Since all plugins are hard to implement correctly, we've taken a different approach with the following requirements:
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. |