Responsive video embed (without using Youtube or Vimeo)

Generally speaking, I would always recommend that it is best to 'embed' videos on a website rather than upload them. If you embed a video, it means you're generally hosting the media on Youtube or Vimeo. This has many advantages over simply uploading video files to your website media library (regardless of the CMS you're using). Youtube/Vimeo are professionals at streaming media content; their servers will probably deliver the video at a better speed than your own host, and they will ensure that it will work on every device/OS etc. It also helps to reduce the amount of file storage on your own web host.

However, sometimes it is useful to be able to embed your video content without using a streaming service - I can't think of one right now, but perhaps it will come to me later...

As far as I'm aware, most browsers support MP4 files now without any backup, but in the past it was generally recommended to include an .ogg file as a backup. The html code above shows how to include both file formats on your site (obviously, you will need to know the url to your own mp4 and ogg files). In this example, I've hosted the video on a different server (to save space on my own website), but you will probably want to change the url to your own media library.

<div class="videocontainer">

<video class="videoembed" controls>
  <source src="https://netdemo.uk/bbb/bbb.mp4" type="video/mp4">
  <source src="https://netdemo.uk/bbb/bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</div>

The 'videocontainer' container div is used to make sure the video is responsive. To make this work, add the following css to your stylesheet:

.videocontainer {
  position: relative; 
  width: 100%; 
  height: 100%;
}

video.videoembed {
  width: 100% !important;
  height: auto !important;
  display:block;
}

...and this is the end result

Autoplay background video

It is also possible to embed the video as a proprtional, full-width background with autoplay (please bear in mind that many browsers, such as Chrome and Safari, will now disable autoplay videos unless they are muted). The codepen example below shows how this works.

Custom play button

The example below strips out all of the native browser media controls, and includes a bespoke play/pause button.