YouTube Masthead Close Button

YouTube Masthead Close Button is an HTML5 custom element that provides a YouTube-compliant close button for hiding the masthead on YouTube's home page. Custom elements allow web developers to define new types of HTML elements, or extend the behavior of core elements. The YouTube Masthead Close Button is built with the Polymer library's implementation of custom elements.
Learn more about Polymer

Features

• Includes built-in code to communicate with YouTube's page to collapse the masthead
• Supports 60 languages
• Using a keyword, automatically show the user's selected YouTube page language
• Choose from black, white or gray color themes
• Add an optional shadow

Prerequisites

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

Includes

Before using the custom element, you must first add these scripts in the head of your creative's HTML file:

<script src="//s0.2mdn.net/ads/studio/Enabler.js"></script>
<script src="//www.gstatic.com/external_hosted/polymer/custom.elements.min.js"></script>
<script src="//www.gstatic.com/ads/ci/ytclosebutton/1/ytclosebutton_min.js"></script>

Set up the custom element

Add the ci-ytclosebutton element to your parent div tag:

<ci-ytclosebutton lang="en" theme="black" shadow="false" id="ytClose_dc">
</ci-ytclosebutton>

The YouTube close button will place itself in the top right corner of the parent element, which should be positioned as absolute in your CSS file. If the ad tag is set up correctly with the klg parameter, the YouTube page language will be used for the text, otherwise it will fall back to using the lang attribute.

Set custom element attributes

Use attributes to change the video teaser behavior. These attributes work the same way as standard HTML tags. The YouTube Close button component has three attributes: language, theme, and shadow.

Language

You can choose a language from a list of 60 different languages worldwide. When your creative is trafficked, you can also apply the keyword parameter klg to your ad tag to use a YouTube user's page language automatically. Otherwise, the language set in the lang attribute will be used.

Theme

The color theme of the button. The default color is black. Valid values are "white", "gray", and "black".

Shadow

Whether the shadow should be used or not. By default, a shadow is not shown. Valid values are "true" or "false".