Lunds universitet - Style Guide

Masonry Video Tile 

<div class="masonry-tile">
    <a href="#" class="nav-block masonry-tile-img overflow-hidden">
        <div class="masonry-tile-video-bg">
            <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" poster="../../images/ui/transparent.gif" style="background-image: url(../../images/_content/video_1@1x.png)">
                <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
                <source src="http://techslides.com/demos/sample-videos/small.ogg" type="video/ogg">
                <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
                <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">
            </video>
        </div>
        <div class="masonry-tile-img-content">
            <div class="blockline">
                <h2><span class="a nav-block-link">Se vår jättefina film!&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                </h2>
            </div>
        </div>
    </a>
</div>
 
<div class="masonry-tile{{modifiers modifiers}}">
  <a href="{{link.url}}" class="nav-block masonry-tile-img overflow-hidden{{modifiers link.modifiers}}">
    <div class="masonry-tile-video-bg">
      <video playsinline="playsinline"
				autoplay="autoplay"
				muted="muted"
				loop="loop"
				poster="{{path '/images/ui/transparent.gif'}}"
				style="background-image: url({{path fallback.image.src}})">
        {{#each videos}}
          <source src="{{path src}}" type="video/{{type}}">
        {{/each}}
      </video>
    </div>
    {{#if title}}
      <div class="masonry-tile-img-content">
        <div class="blockline">
          <h2><span class="a nav-block-link">{{title}}&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
          </h2>
        </div>
      </div>
    {{/if}}
  </a>
</div>
 
{
  "videos": [
    {
      "src": "http://techslides.com/demos/sample-videos/small.webm",
      "type": "webm"
    },
    {
      "src": "http://techslides.com/demos/sample-videos/small.ogg",
      "type": "ogg"
    },
    {
      "src": "http://techslides.com/demos/sample-videos/small.mp4",
      "type": "mp4"
    },
    {
      "src": "http://techslides.com/demos/sample-videos/small.3gp",
      "type": "3gp"
    }
  ],
  "fallback": {
    "image": {
      "src": "/images/_content/video_1@1x.png",
      "alt": "En jättefin film"
    }
  },
  "title": "Se vår jättefina film!",
  "link": {
    "url": "#"
  }
}

Size

It is recommended that the video is as close as possible in resolution to the expected size of the element holding it. The video will be cropped and centered n the element. Which means that if the video is 300x200 pixels and the element is 400x200 pixels the video will be stretched horizontally to fill that space and cropped vertically to keep the aspect ratio.

Format

The <video>-tag supports most common codecs, the most commonly used ones being mp4, webm, ogg and 3gp. For a complete list and further instructions please see The Mozilla Developer Network web video codec guide

It is recommended to include at least the most commonly used formats in the list of <source>-tags to cover as many browsers as possible. Only the first one to match the browser will be loaded so there is no need to worry about slowing down the page.

Fallback

It is recommended to use the first frame of the video as a fallback image, the image will be displayed until the video is loaded (for ever if the video can’t be loaded for some reason)

The component uses the <video> element attribute poster for displaying a fallback if the video is not supported. This requires the tag itself to be supported by the browser. This holds for every browser today (>IE9)