MP4 Video: With Controls 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/mp4-video.css?cb=">

<div class="mp4-video mp4-video--with-description" data-module="video" data-autoplay="true" data-fullscreen="false">
    <h2 class="mp4-video__title">Video title</h2>

    <div class="mp4-video__video-container js-video-container">
        <video data-module="video" class="video-player__video" playsinline preload="metadata" poster="https://via.placeholder.com/1600x900.png" loop controls autoplay muted data-poster-url="https://via.placeholder.com/1600x900.png">
            <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
            <source src="https://videos.pexels.com/video-files/33839224/14360680_1920_1080_30fps.mp4" type="video/mp4">
        </video>
    </div>

    <p class="mp4-video__description">Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after.</p>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/mp4-video.css?cb={{cacheBuster}}">
{{/if}}

<div class="mp4-video{{#if description}} mp4-video--with-description{{/if}}" data-module="video" {{#if autoplay}}data-autoplay="true"{{/if}}
    data-fullscreen="false">
    {{#if title}}<h2 class="mp4-video__title">{{title}}</h2>{{/if}}

    <div class="mp4-video__video-container js-video-container">
        {{> @video video}}
    </div>

    {{#if description}}<p class="mp4-video__description">{{description}}</p>{{/if}}
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "autoplay": true,
  "showControls": false,
  "loop": true,
  "title": "Video title",
  "description": "Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after.",
  "video": {
    "autoplay": true,
    "showControls": true,
    "loop": true,
    "posterUrl": "https://via.placeholder.com/1600x900.png",
    "sources": [
      {
        "type": "video/webm",
        "url": "http://techslides.com/demos/sample-videos/small.webm"
      },
      {
        "type": "video/mp4",
        "url": "https://videos.pexels.com/video-files/33839224/14360680_1920_1080_30fps.mp4"
      }
    ]
  }
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.mp4-video {
    $this: &;

    &--with-description {
        #{$this}__video-container {
            @extend %spacer-small;
        }
    }

    &__title {
        @extend %heading02;
        @extend %spacer-small;
    }

    &__description {
        @extend %p--body;
    }

    &__video-container {
        position: relative;
    }
}
  • URL: /components/raw/mp4-video/mp4-video.scss
  • Filesystem Path: source/patterns/03-components/media/mp4-video/mp4-video.scss
  • Size: 422 Bytes

No notes defined.