播放Youtube影片

Youtube 當機 網友：世界末日! Youtube太重要了，現在我們來看看在 AMP 的世界裡， Youtube 又該如何引用吧!

基本範例

<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480" height="270"></amp-youtube>

<amp-youtube
        id="myLiveChannel"
        data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
        width="358"
        height="204"
        layout="responsive">
    <amp-img
        src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
        placeholder
        layout="fill"
        />
  </amp-youtube>

Required Script

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Attribute

autoplay - 自動播放

data-live-channelid

可以從影片網址上看出來。例如： https：//www.youtube.com/embed/live_stream？channel=UBB8Kb4pxYzsDsHxzBfnid4Q ， UCB8Kb4pxYzsDsHxzBfnid4Q 就是 channel id

data-param-*

所有 data-param-* 屬性都將作為查詢參數添加到 YouTube iframe src中。

Key 值與 value 值需做 URI encoded 。 key 值格式要為 camel cased 。

data-param-controls=1 會變為 ＆controls=1

credentials - 定義Fetch API指定的憑證選項。

非必填，預設的值為 include；可填的值有 omit 、 include

common attributes

詳細請看

成果可以看這

參考來源：

• AMP 官網
• Amp By Example