📖 Added title attribute to documentation pages + small amp-youtube fix (

#30893)

* Added title attribute to documentation pages + small youtube fix

* Missed some (optional)s

* Addressed comments

extensions/amp-3d-gltf/amp-3d-gltf.md

@@ -100,6 +100,10 @@ center. To enable rotation, set the value to `true`. `autorotate` defaults to
 Use the `enableZoom` attribute to disable zooming in and out of the model. To
 disable zoom, set the value to `false`. `autororate` defaults to `true`.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"GLTF 3D model"`.
+
 ## Actions
 
 ### setModelRotation

extensions/amp-ad/amp-ad.md

@@ -237,6 +237,10 @@ parent of the ad. When the `data-ad-container-id` is specified, and such a
 the container component instead of the ad component during no fill. This feature
 can be useful when an ad indicator is in presence.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Advertisement"`.
+
 ### common attributes
 
 This element includes

extensions/amp-beopinion/amp-beopinion.md

@@ -95,6 +95,10 @@ serving of ads outside of an `amp-ad` element.
 
 [/filter]<!-- formats="ads" -->
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"BeOpinion content"`.
+
 ## Styling
 
 BeOpinion does not currently provide an API that yields fixed aspect ratio for embedded contents. Currently, AMP automatically proportionally scales the content to fit the provided size, but this may yield less than ideal appearance. You might need to manually tweak the provided width and height. Also, you can use the `media` attribute to select the aspect ratio based on the screen width.

extensions/amp-bodymovin-animation/amp-bodymovin-animation.md

@@ -68,6 +68,10 @@ full player and want to use an HTML renderer they may do so by specifying the
 
 This attribute only accepts the values `html` and `svg`.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Airbnb BodyMovin animation"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)

extensions/amp-embedly-card/amp-embedly-card.md

@@ -118,6 +118,10 @@ card container. Use `dark` to set this theme. For dark backgrounds it's better
 to specify this. The default is `light`, which sets no background color of the
 main card container.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Embedly card"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)

extensions/amp-facebook-comments/amp-facebook-comments.md

@@ -65,6 +65,10 @@ For details, see the
 The order to use when displaying comments. For details, see the
 [Facebook comments documentation](https://developers.facebook.com/docs/plugins/comments).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook comments"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)

extensions/amp-facebook-like/amp-facebook-like.md

@@ -99,6 +99,10 @@ default is `small`.
 For details, see the
 [Facebook comments documentation](https://developers.facebook.com/docs/plugins/like-button#settings).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook like button"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)

extensions/amp-facebook-page/amp-facebook-page.md

@@ -76,6 +76,10 @@ Hides the custom call to action button (if available). Default value is `false`.
 
 Uses the small header instead. Default value is `false`.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook page"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)

extensions/amp-facebook/amp-facebook.md

@@ -114,6 +114,10 @@ specify a locale as well.
 For details on strings accepted here please visit the
 [Facebook API Localization page](https://developers.facebook.com/docs/internationalization).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)

extensions/amp-gist/amp-gist.md

@@ -78,6 +78,10 @@ resize to fit so that its contents will fit.
 
 If specified, display only one file in a gist.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Github gist"`.
+
 ## Validation
 
 See [amp-gist rules](validator-amp-gist.protoascii) in the AMP validator specification.

extensions/amp-ima-video/amp-ima-video.md

@@ -95,6 +95,10 @@ A format string that looks like "Ad (%s of %s)", used to generate the ad disclos
 Requires `amp-video-docking` extension. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
 For more details, see [documentation on the docking extension itself](https://amp.dev/documentation/components/amp-video-docking).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"IMA video"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.

extensions/amp-mathml/amp-mathml.md

@@ -72,6 +72,10 @@ Specifies the formula to render.
 
 If specified, the component renders inline (`inline-block` in CSS).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"MathML formula"`.
+
 ## Validation
 
 See [amp-mathml rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-mathml/validator-amp-mathml.protoascii) in the AMP validator specification.

extensions/amp-reddit/amp-reddit.md

@@ -85,6 +85,10 @@ Use the `amp-reddit` component to embed a Reddit post or comment.
     <td width="40%"><strong>data-embedlive</strong></td>
     <td>Indicates whether the embedded comment should update if the original comment is updated. Supported when <code>data-embedtype</code> is <code>comment</code>.</td>
   </tr>
+  <tr>
+    <td width="40%"><strong>title</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Reddit</code>.</td>
+  </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
     <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>

extensions/amp-twitter/amp-twitter.md

@@ -131,6 +131,10 @@ For details on the available arguments, see the "Timelines" section in <a href="
     <td width="40%"><strong>data-* (optional)</strong></td>
     <td>You can specify options for the Tweet, Moment, or Timeline appearance by setting <code>data-</code> attributes. For example, <code>data-cards="hidden"</code> deactivates Twitter cards.
 For details on the available options, see Twitter's docs <a href="https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference">for tweets</a>, <a href="https://developer.twitter.com/en/docs/twitter-for-websites/moments/guides/parameter-reference0">for moments</a> and <a href="https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference">for timelines</a>.</td>
+  </tr>
+   <tr>
+    <td width="40%"><strong>title (optional)</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Twitter</code>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>

extensions/amp-viqeo-player/amp-viqeo-player.md

@@ -67,4 +67,8 @@ The `width` and `height` attributes determine the aspect ratio of the Viqeo embe
     <td width="40%"><strong>width and height</strong></td>
     <td>The width and height attributes are special for the Viqeo embed. Viqeo supports any proportions of videos. Basically Viqeo generates an unique code for each video depending on video size and proportions, but Viqeo user may change proportions in interface. Anyway after pressing 'Get code' button an unique code will be generated.</td>
   </tr>
+   <tr>
+    <td width="40%"><strong>title</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Viqeo video</code>.</td>
+  </tr>
 </table>

extensions/amp-yotpo/amp-yotpo.md

@@ -71,6 +71,10 @@ _Example: Display the reviews widget_
     <td width="40%"><strong>data-** (optional)</strong></td>
     <td>Each Yotpo widget has optional data attributes. For example, the reviews widget has an optional attribute named <code>product-id</code>. Refer to <a href="https://support.yotpo.com/en/on-site">Yottpo's documentation</a> for which attributes to specify.<br>
 When using the <code>amp-yotpo</code> extension, for each corresponding Yotpo attribute prepend <code>data</code> to the attribute. For example, the <code>product-id</code> attribute becomes <code>data-product-id</code>.</td>
+  </tr>
+   <tr>
+    <td width="40%"><strong>title (optional)</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Yotpo widget</code>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>

extensions/amp-youtube/0.1/amp-youtube.js

@@ -260,7 +260,7 @@ class AmpYoutube extends AMP.BaseElement {
   layoutCallback() {
     // See https://developers.google.com/youtube/iframe_api_reference
     const iframe = createFrameFor(this, this.getVideoIframeSrc_());
-    iframe.setAttribute('title', 'AMP YouTube video');
+    iframe.title = this.element.title || 'YouTube video';
 
     // This is temporary until M74 launches.
     // TODO(aghassemi, #21247)

extensions/amp-youtube/amp-youtube.md

@@ -118,6 +118,10 @@ If you want to use the [YouTube player in privacy-enhanced mode](http://www.goog
 
 Usually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"YouTube video"`.
+
 ### common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.