Video Element

Add an HTML 5 video to your site.

Overview

With the Video Element you can embed video files in your site. For YouTube videos there is an own element, this element is targeted at raw video files (mp4 preferably, out of compatibility reasons). 

For video backgrounds (where you want content on top of the video, use the section background properties).

Usage Examples

  • Tutorial and product videos.
  • Videos not serving as background.
  • Hosting your own videos.
  • ...

Video Properties

  1. Video: Upload a video (should be an mp4) or insert the URL that points to it. Please mind your website quota and out of performance reasons it should be less then 10 MB. Please make sure you have the permissions to distribute it!
  2. Play in loop: Play the video in a loop. 
  3. Auto-play: Should the video start playing once the user opens the page.
  4. Show controls: Should the controls (pause, play..) be visible to the user. This setting is browser dependent.
Everything else, like spacing, is configured with the common general properties. 

See it in action

Video Backgrounds (with section settings)

The video background option in sections is an neat alternative.

Sample button

Generated HTML


<div class="mame-element mame-video">
   <video width="100%" height="100%" loop autoplay style="..">
     <source src="..." type="video/mp4>
     "Your browser does not support videos."
   </video>
</div>

Style / CSS Selectors


.mame-video {
  /* All video elements */
}

JavaScript

Videos are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

References / Useful information

Was this article helpful?

Newsletter

You can unsubscribe at any time. For information about our privacy practices, please check the privacy policy.
Made with ❤ and Mame in the European Union.
Copyright (C) 2019 - 2021 mame.app. All Rights reserved.