Free YouTube Embed Code Generator

Settings
Start Video at:
seconds
End Video at:
seconds

Appearence

Control Options


Where did the other options go?

Some features previously available in this tool are now offered as official YouTube features, and so do not require complex workarounds.

If you wish, you can use the legacy version of this tool (no longer maintained) here.

Click on the images below to open video settings page (must be logged into YouTube)


Click for HD version
© 2020 All rights reserved.

YouTube Embed Code

This is how it works

Audiovisual content attracts attention and not only pleases the visitors to your website. The search engines also reward the added value that multimedia content offers. Videos, in particular, enable you to make information offers more varied. In addition, products and services can be presented in more detail with videos than with texts and images alone. However, delivering YouTube video content on websites has long been considered difficult.

In order to display multimedia content, appropriate browser plug-ins (e.g. Adobe Flash Player) had to be installed manually on the end device and updated regularly, which often resulted in incompatibilities and security gaps. Providers were also confronted with complicated embed codes and sometimes struggled to convert videos into the appropriate formats (e.g. SWF). But these additional technologies could soon be history. Since the fifth version, the Hypertext Markup Language (HTML for short) has been offering a native element with which videos can be integrated into the website code as full web content . Alternatively, you have the option of outsourcing YouTube video hosting to providers such as YouTube or Vimeo. We'll show you how it works.

HTML5 video integration made easy

HTML5 makes embedding videos child's play. All you need is the native element video , which can be expanded with optional attributes. The following code example shows how to add video resources to the source code of your website.

The YouTube video element in the example contains the URL to the YouTube Embed Code resourcesrc = example.mp4 ") and the optional widthheight, controls and poster attributes that define how the YouTube Embed Code will be displayed on the website. Text that appears between the introductory and the closing tag of the YouTube Embed Code element is only displayed if a browser cannot display the YouTube Embed Code. Website operators usually use this function to offer an alternative description and a download link to the resource.

Optional attributes of the HTML5 YouTube video element

If a resource on the YouTube video element involved, this must be the link to the resource as either srcattribute or a child element source included. In addition, the YouTube video element can be expanded to include the following attributes:

attribute function

width / height

The width and height attributes allow you to explicitly specify the dimensions of your YouTube video. If this information is missing, the YouTube video element accesses the size information of the YouTube Embed Code file. If you only use one of the two attributes, the displaying browser automatically adjusts the aspect ratio.
controls The controls attribute enables you to activate the native control bar of the web browser. Alternatively, you can define your own control elements using JavaScript.  
poster The poster attribute you use to refer to a graphic file to be displayed as a preview for the video. If this attribute is missing, the first frame of the YouTube Embed Code is used for the preview.
autoplay With the autoplay attribute you instruct the web browser to start videos automatically after the website has been created.
loop If you use the loop attribute, the video will be played in a continuous loop.
muted Use the muted attribute to mute the YouTube Embed Code's sound.
preload The preload attribute gives the browser a recommendation on how the YouTube Embed Code file should be preloaded when downloading the website. There are three values available: the default value auto normally loads the entire file, a video element with the preload value metadata only preloads metadata and the value none prevents the preload of video data.

Browser without HTML5 support

Current versions of the most popular web browsers support HTML5. In order to make video content on your website accessible to those users who are technically not up to date, text links within the video element allow you to offer separate download files for the YouTube Embed Code. If you get the alternative text instead of the YouTube Embed Code, you have the choice of downloading the YouTube Embed Code and viewing it in a local media player.  

The HTML5 Codec Chaos

The HTML5 specification defines the video element and the associated application programming interface (API), but does not make any specifications for video coding . The choice of video format therefore poses problems for website operators. Each of the popular video formats WebMOggTheora and H.264MPEG4 have advantages and disadvantages. And so the manufacturers of market-leading web browsers have not yet been able to agree on a common standard. While Internet Explorer and Safari primarily use the H.264 / MPEG4 format, which is subject to a fee for the manufacturerset, a format that has been available almost everywhere since 2013, the web browsers Firefox, Chrome and Opera also support free formats such as Ogg Theora and WebM .

Browser MP4 (MPEG4 files with H.264 video codec + AAC audio codec) WebM (WebM files with VP8 / VP9 video codec + Vorbis audio codec) Ogg (Ogg files with Theora video codec + Vorbis audio codec)
IE 9+ Yes No No
Firefox Yes Yes Yes
Chrome Yes Yes Yes
safari Yes No No
Opera Yes Yes Yes

In order to prevent incompatibilities, it is advisable to provide videos in different formats. The video element allows for this purpose, various video resources by the child element source to integrate with the type excel attribute for the Web browser.

If alternative source elements with the corresponding type attribute are included in the video element, a browser automatically selects the preferred video format when the website is set up. It should be noted that with this type of video embedding , the video element must not contain an src attribute with a resource.

Integrate audiovisual content via video platforms

If you don't want to provide videos via your own server, but want to outsource the video hosting to an external service provider, platforms such as YouTube and Vimeo have the option of uploading video material free of charge and integrating clips into your own website using an embed code .

Since popular video platforms ensure that your content is compatible with the most popular web browsers, the formats of these providers are supported on most end devices. Outsourcing video clips also has the advantage that your own server is not additionally burdened by the streaming. However, website operators should inform themselves in advance about the terms of use for video hosting and adapt the embed code to their own requirements.

For example, if you want to embed a YouTube video, call up the relevant clip on the platform and take the code from the embedding menu. Central settings can also be made here to define the dimensions of the YouTube Embed Code and to activate controls and video titles. To prevent third-party content from appearing on your own page, it is also advisable to deactivate the preview function for alternative videos. Otherwise, the YouTube Embed Code platform will present content from other users in the integrated player who have been assigned similar keywords - in the worst case, videos from a direct competitor.