Video

<div class="video" data-module="video" data-autoplay="" data-hide-controls="" data-loop="" data-muted="">
    <template class="js-small-video-template">
        <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
            <video controls playsinline class="video__player js-video-player">
                <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
            </video>
        </div>
    </template>
    <template class="js-medium-video-template">
        <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
            <video controls playsinline class="video__player js-video-player">
                <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
                <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
            </video>
        </div>
    </template>
    <div class="js-video-container video__container"></div>
</div>
{{#if isYouTube}}
    {{> @cp-medium-youtube-video}}
{{/if}}
{{#if isYouku}}
    {{> @cp-medium-youku-video}}
{{/if}}
{{#unless isYouTube}}
    {{#unless isYouku}}
        {{> @cp-medium-html5-video}}
    {{/unless}}
{{/unless}}
{
  "video": {
    "hideControls": true,
    "videoUrls": [
      {
        "type": "video/webm",
        "url": "http://techslides.com/demos/sample-videos/small.webm"
      },
      {
        "type": "video/mp4",
        "url": "http://techslides.com/demos/sample-videos/small.mp4"
      }
    ],
    "mobileVideoUrls": [
      {
        "type": "video/mp4",
        "url": "http://techslides.com/demos/sample-videos/small.mp4"
      }
    ],
    "posterUrl": "https://via.placeholder.com/1600x900.png"
  }
}

There are no notes for this item.