Google Web Designer's YouTube Player

Google Web Designer's YouTube component makes it easier to place YouTube videos in ads built with Google Web Designer. But if you're not using Google Web Designer, you can still use the underlying <gwd-youtube> custom element.


  • Embed the YouTube video player in any HTML5 creative, using any HTML5 authoring tool
  • Customize the player appearance and controls


  • Your creative must be built as an HTML5 creative.
  • Your HTML file must include the necessary script libraries, see Start from a template, below.

Start from a template

Before using the custom element, get the latest YouTube video player custom element from a Google Web Designer template:

  1. Download the YouTube Masthead with YouTube Player template.
  2. Open the files with any HTML editor and add your own images, text, and other interactive elements.
  3. (Optional) If you're building a different creative size, open style.css and adjust the main container size.

Set up custom element attributes

Open the template files you downloaded above, then find and open logic.js. Find the method called showYTPlayer0. This method creates the YouTube Player element and sets the attributes that change the video player's controls and appearance. These attributes work the same way as the attributes of standard HTML tags and are the same as the available video properties found in the YouTube component in Google Web Designer.

Example code snippet

Here's the start of the showYTPlayer0 function. The player attributes are set on the bold lines.
function showYTPlayer0(containerId) {
  if (!creative.dom.ytplayer0) {
    creative.ytplayer0Ended = false;
    creative.dom.ytplayer0 = document.createElement('gwd-youtube');
    var ytp = creative.dom.ytplayer0;
    ytp.setAttribute('id', 'ytp-0');
    // Update with the URL of YOUR YouTube video here:
    ytp.setAttribute('video-url', '');
    ytp.setAttribute('autoplay', 'preview'); // none, standard, preview, intro.
    ytp.setAttribute('preview-duration', '10'); // Only for preview autoplay mode.
    // Adformat parameter required for any creative using a YouTube player.
    ytp.setAttribute('adformat', '1_5');
    ytp.setAttribute('controls', 'autohide');
// none, show, autohide.

Expand the sections below to learn about available attributes and see examples.

expand all | collapse all

Required attributes


Set the YouTube video ID for the video to play. YouTube video IDs are the unique identifier found in a video URL. For example, the video ID is shown in bold for this YouTube video URL:


Play a Maru video.

ytp.setAttribute('video-url', '');

Optional attributes

The attributes below are optional. To enable them, add them to your HTML tag. To disable them, leave them out.


Enables fullscreen when displayed on a desktop.


This attribute acts like a Boolean. To enable fullscreen, include the attribute in the HTML. To disable the player's fullscreen option, leave this line out.

ytp.setAttribute('allowfullscreen', '');

Shows video annotations, if available.


Show video annotations.

ytp.setAttribute('annotations', '');

Set video autoplay options:

  • none - (Default) The video does not play automatically.
  • preview - The video plays in a muted state underneath a play button overlay.
  • standard - The video plays automatically. Does not count as a YouTube view.
  • intro - The video plays in a muted state without a play button overlay or any controls. Does not count as a YouTube view.
Autoplay is not supported on mobile browsers.


Autoplay the video when the player loads.

ytp.setAttribute('autoplay', 'standard');

Set the color theme of the player progress bar. Available color themes are:

  • red - (Default) As the video plays, the progress bar fills in with a red progress line.
  • white - As the video plays, the progress bar fills in with a white progress line.


Show a white progress bar.

ytp.setAttribute('color', 'white');

Show or hide the video controls using the following values:

  • autohide - (Default) The video progress bar and the player controls slide out of view a couple of seconds after the video starts playing. The controls reappear if the user interacts with the video player.
  • none - Hides the progress bar and player controls.


Hide the video controls.

ytp.setAttribute('controls', 'none');

Advanced users can use this attribute to set custom player parameters, as described in the YouTube Player API documentation.


Hide the YouTube logo in the control bar.

ytp.setAttribute('extra-player-args', 'modestbranding=1');

Restart the video when it ends.


ytp.setAttribute('loop', '');

Mute the audio when the video first plays. When enabled, the video will play with the sound off. To hear the audio, the viewer will have to use the video controls to turn the sound on.


Play the video with the sound muted.

ytp.setAttribute('muted', '');

Pause the video when there is one second left. Use this attribute to pause on the video's last frame instead of showing the video's poster image with the YouTube play button.


Pause the video on the last frame.

ytp.setAttribute('pause-on-end', '');

Set the duration of the video preview in seconds. This duration is only applied when the autoplay attribute is set to "preview".


Autoplay a ten second preview.

ytp.setAttribute('autoplay', 'preview');
ytp.setAttribute('preview-duration', '10');

Set to show related videos when the video completes.


ytp.setAttribute('related', '');

Set a custom starting time for your video in seconds.


Start playing the video at the 10 second mark.

ytp.setAttribute('start-position', '10');

Show the video title at the top of the player window whenever the video controls are shown. This title is set in YouTube when the video is uploaded.


Show the title.

ytp.setAttribute('title', '');

Using YouTube video with mobile browsers

Mobile browsers disable YouTube autoplay to keep users from incurring data charges for unrequested content. The best practice for mobile browsers is to turn off autoplay and to and turn on video controls instead. This ensures that your video will work the way you intend it to.

Advanced properties

Click the expand icon  next to Advanced properties in the component properties pane to edit the following advanced properties:

Property Description
Allow fullscreen on desktop Enables fullscreen viewing on the computer desktop.
Extra player parameters Lets experienced users add other YouTube parameters. Separate multiple parameters with ampersands (&).


Events can be used to trigger other actions in your ad. The YouTube component sends the following events:

Event Description
Buffering Sent when the YouTube video is buffering.
Ended Sent when the YouTube video has reached the end.
Paused Sent when the YouTube video is paused.
Playing Sent when the YouTube video starts playing.
Replayed Sent when the YouTube video has been replayed.
Started Sent when 0% of the YouTube video has been viewed.
First quartile Sent when 25% of the YouTube video has been viewed.
Midpoint Sent when 50% of the YouTube video has been viewed.
Third quartile Sent when 75% of the YouTube video has been viewed.
Complete Sent when 100% of the YouTube video has been viewed.
Preview started Sent when 0% of the preview has been viewed.
Preview first quartile Sent when 25% of the preview has been viewed.
Preview midpoint Sent when 50% of the preview has been viewed.
Preview third quartile Sent when 75% of the preview has been viewed.
Preview Complete Sent when 100% of the preview has been viewed.


The following YouTube component actions can be triggered by other events:

Action Configuration options
Toggle mute none
Pause none
Play after pause none
Replay none
Seek Time - The time in seconds.
Set YouTube video ID
  • ID - The ID of the YouTube video.
  • Cue only - When checked, the video will be loaded but not played.
Was this article helpful?
How can we improve it?