<!DOCTYPE html>
<!--
  Copyright 2015 The AMP HTML Authors. All Rights Reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS-IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the license.
--><!--
  Test Description:
  Tests for the amp-youtube tag. See the inline comments.
--><html amp><head>
  <meta charset="utf-8">
  <link rel="canonical" href="./regular-html-version.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-latest.js"></script>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
  <!-- This deprecated, we now prefer data-videoid. -->
  <amp-youtube width="480" height="270" video-id="https://www.youtube.com/watch?v=9bZkp7q19f0">
  </amp-youtube>
  <amp-youtube width="480" height="270" video-id="9bZkp7q19f0">
  </amp-youtube>
  <!-- This is the current way to do it, according to
https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube/amp-youtube.md -->
  <amp-youtube width="480" height="270" data-videoid="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
  </amp-youtube>
  <!-- This is invalid, the video id is missing. -->
  <amp-youtube width="480" height="270"></amp-youtube>
  <!-- This is also invalid, dimensions are missing. -->
  <amp-youtube data-videoid="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
  </amp-youtube>
  <!-- This is invalid, one can only have one of these two. -->
  <amp-youtube width="480" height="270" video-id="https://www.youtube.com/watch?v=9bZkp7q19f0">
  </amp-youtube>
</body>

</html>


ORIGINAL HTML
---------------
Line  1: <!--
Line  2:   Copyright 2015 The AMP HTML Authors. All Rights Reserved.
Line  3: 
Line  4:   Licensed under the Apache License, Version 2.0 (the "License");
Line  5:   you may not use this file except in compliance with the License.
Line  6:   You may obtain a copy of the License at
Line  7: 
Line  8:       http://www.apache.org/licenses/LICENSE-2.0
Line  9: 
Line 10:   Unless required by applicable law or agreed to in writing, software
Line 11:   distributed under the License is distributed on an "AS-IS" BASIS,
Line 12:   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
Line 13:   See the License for the specific language governing permissions and
Line 14:   limitations under the license.
Line 15: -->
Line 16: <!--
Line 17:   Test Description:
Line 18:   Tests for the amp-youtube tag. See the inline comments.
Line 19: -->
Line 20: <!doctype html>
Line 21: <html ⚡>
Line 22: <head>
Line 23:   <meta charset="utf-8">
Line 24:   <link rel="canonical" href="./regular-html-version.html" />
Line 25:   <meta name="viewport" content="width=device-width,minimum-scale=1">
Line 26:   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Line 27:   <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-latest.js"></script>
Line 28:   <script async src="https://cdn.ampproject.org/v0.js"></script>
Line 29: </head>
Line 30: <body>
Line 31:   <!-- This deprecated, we now prefer data-videoid. -->
Line 32:   <amp-youtube width="480" height="270"
Line 33:                video-id="https://www.youtube.com/watch?v=9bZkp7q19f0">
Line 34:   </amp-youtube>
Line 35:   <amp-youtube width="480" height="270"
Line 36:                video-id="9bZkp7q19f0">
Line 37:   </amp-youtube>
Line 38:   <!-- This is the current way to do it, according to
Line 39: https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube/amp-youtube.md -->
Line 40:   <amp-youtube width="480" height="270"
Line 41:                data-videoid="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
Line 42:   </amp-youtube>
Line 43:   <!-- This is invalid, the video id is missing. -->
Line 44:   <amp-youtube width="480" height="270"></amp-youtube>
Line 45:   <!-- This is also invalid, dimensions are missing. -->
Line 46:   <amp-youtube data-videoid="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
Line 47:   </amp-youtube>
Line 48:   <!-- This is invalid, one can only have one of these two. -->
Line 49:   <amp-youtube width="480" height="270"
Line 50:                video-id="https://www.youtube.com/watch?v=9bZkp7q19f0"
Line 51:                data-videoid="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
Line 52:   </amp-youtube>
Line 53: </body>
Line 54: </html>
Line 55: 



AMP-HTML Validation Issues and Fixes
-------------------------------------
FAIL

<amp-youtube width="480" height="270" video-id="https://www.youtube.com/watch?v=9bZkp7q19f0"> on line 33
- The attribute 'video-id' in tag 'amp-youtube' is deprecated - use 'data-videoid' instead.
   [code: DEPRECATED_ATTR  category: DEPRECATION see: https://www.ampproject.org/docs/reference/extended/amp-youtube.html]

<amp-youtube width="480" height="270" video-id="9bZkp7q19f0"> on line 36
- The attribute 'video-id' in tag 'amp-youtube' is deprecated - use 'data-videoid' instead.
   [code: DEPRECATED_ATTR  category: DEPRECATION see: https://www.ampproject.org/docs/reference/extended/amp-youtube.html]

<amp-youtube width="480" height="270"> on line 44
- The tag 'amp-youtube' is missing a mandatory attribute - pick one of ['src', 'data-videoid'].
   [code: MANDATORY_ONEOF_ATTR_MISSING  category: AMP_TAG_PROBLEM see: https://www.ampproject.org/docs/reference/extended/amp-youtube.html]

<amp-youtube data-videoid="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> on line 46
- The implied layout 'CONTAINER' is not supported by tag 'amp-youtube'.
   [code: IMPLIED_LAYOUT_INVALID  category: AMP_LAYOUT_PROBLEM see: https://www.ampproject.org/docs/reference/extended/amp-youtube.html]

<amp-youtube width="480" height="270" video-id="https://www.youtube.com/watch?v=9bZkp7q19f0" data-videoid="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> on line 51
- The attribute 'video-id' in tag 'amp-youtube' is deprecated - use 'data-videoid' instead.
   [code: DEPRECATED_ATTR  category: DEPRECATION see: https://www.ampproject.org/docs/reference/extended/amp-youtube.html]
- Mutually exclusive attributes encountered in tag 'amp-youtube' - pick one of ['src', 'data-videoid'].
   [code: MUTUALLY_EXCLUSIVE_ATTRS  category: AMP_TAG_PROBLEM see: https://www.ampproject.org/docs/reference/extended/amp-youtube.html]
   ACTION TAKEN: data-videoid attribute(s) removed as they were mutually exclusive.

COMPONENT NAMES WITH JS PATH
------------------------------
'amp-youtube', include path 'https://cdn.ampproject.org/v0/amp-youtube-0.1.js'

