Search
Clear search
Close search
Google apps
Main menu

YouTube Player for Google Web Designer

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.

Features

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

Prerequisites

  • Your creative must be built as an HTML5 creative.
  • Your HTML file must include the necessary script libraries, see the Starter files section below.

Starter files

Before using the custom element, download YouTube video player starter files for Google Web Designer:

  1. Go to the Rich Media Gallery's starter files page
  2. Choose a format (for example, Masthead).
  3. If needed, adjust the creative dimensions.
  4. Click Download

The starter files include an up-to-date version of Google Web Designer's YouTube player. You can open the files with any HTML editor and add your own images, text, and other interactive elements.

Set up custom element attributes

Open the downloaded files, 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', 'https://www.youtube.com/watch?v=f9HYu_d1JJw');
    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

video-url

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:
https://www.youtube.com/watch?v=wAFuwN2AlPk

Example

Play a Maru video.

ytp.setAttribute('video-url', 'https://www.youtube.com/watch?v=wAFuwN2AlPk');
 

Optional attributes

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

allowfullscreen

Enables fullscreen when displayed on a desktop.

Example

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', '');
annotations

Shows video annotations, if available.

Example

Show video annotations.

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

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.

Example

Autoplay the video when the player loads.

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

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.

Example

Show a white progress bar.

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

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.

Example

Hide the video controls.

ytp.setAttribute('controls', 'none');
extra-player-args

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

Example

Hide the YouTube logo in the control bar.

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

Restart the video when it ends.

Example

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

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.

Example

Play the video with the sound muted.

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

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.

Example

Pause the video on the last frame.

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

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

Example

Autoplay a ten second preview.

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

Set to show related videos when the video completes.

Example

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

Set a custom starting time for your video in seconds.

Example

Start playing the video at the 10 second mark.

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

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.

Example

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

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.

Actions

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?