experimental feature
This is an experimental feature, which means it is still in development. Until the experimental label is removed, the Deprecation Policy for YouTube APIs won't apply to this feature as discussed in the API Terms of Service.

The YouTube Subscription Widget lets you add a one-click Subscribe button to any page. The button lets people subscribe to your YouTube channel without having to leave your site to either log in to YouTube or confirm their subscriptions.

The buttons below demonstrate some of the different layout and configuration options for subscription buttons:

Standard button:

Avatar + button:

Other languages:

Configure a button

The tool below lets you configure an embedded subscription button. You can set the button's display options, preview the button, and copy the code needed to insert that button on your page.


Channel Name:



Subscription button options

This section explains how to construct an <iframe> tag for a subscription button. As shown in the examples and configuration tool above, the button supports several configurable options. You set these options by adding query parameters to the <iframe> tag's src attribute value. The supported query parameters are also listed below.

Include the following attributes in your <iframe> tag:

Modifying the size of a button

You may notice that an iframe that contains an embedded subscription button is larger than the actual button. The size discrepancy accounts for the difference in the button text length for different languages as demonstrated in the buttons below.

To fix this, include the YouTube Iframe API on your page and call the YT.SubscribeEmbed.setup() to resize your buttons. The function is called automatically when your page loads, but you can call it again if your application creates subscription buttons dynamically.

The sample code below demonstrates how to asynchronously load the Iframe API and call the YT.SubscribeEmbed.setup() function.

  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // This function gets called automatically when the page loads,
  // but you can call it again if your iframes are created dynamically.

The example below shows a subscription button that has not been resized. The iframe's border lets you see the effect of resizing it. You can click the link to resize the button.