The VideoStack purposefully foregoes support for things like custom video player controls and callbacks. These types of features are already a formidable part of other stacks like Player, LitePlayer, VideoPlayer, TopBox and MultiPlayer. This stack is geared towards the complete novice user, who is wanting to experiment with getting self-hosted MP4 files embedded successfully into a RapidWeaver website.

As obvious as it may sound, before you install and use VideoStack, you must already have RapidWeaver and the Stacks plugin installed on your computer!

You can use multiple VideoStacks on the same page. But be aware that if the website user clicks the 'play' button on multiple videos, they will all play at the same time. Again the other stacks sold here have safeguards to prevent this type of problem occurring.

The main benefit of self hosted video is that you remain in full ownership and control of the content. Many video sharing platforms are blocked in different regions of the world. Some video sharing platforms have very obscure and, at times, very unfair moderation algorithms to shadow-ban or permanently delete content that doesn't fit comfortably within their limited ideologies. Plus nearly all video sharing platforms are laden-down with huge amounts of advertising and intrusive user tracking that you cannot turn off!

Hosting your own MP4 videos is surprisingly easy and satisfying. VideoStack takes care of the complicated coding and presents video to the maximum possible accessibility standards. This video player will work across all modern web browsers and devices. Practically any web browser software released since 2010 will support VideoStack.

Example

This is a working example of VideoStack, complete with support for chapters. Try resizing your screen and also try testing this page on different web browsers and devices. Chapters highlight as the video plays and you can also use the chapter buttons to navigate to different parts of the video.

  • Start
  • Five Seconds In
  • Ten Seconds In
  • Ten Seconds From End


Setup

To start with, you need a video in MP4 format. VideoStack cannot use video stored on YouTube, Vimeo, Lbry.tv, DailyMotion or other video sharing platforms (for which other stacks already exist that support all of these and more). You must use an MP4 video that you add as a resource in RapidWeaver or upload to your web server via FTP or a cloud storage server. Free software like Miro Converter (my recommendation), VLC or Handbrake is the easiest way to convert a video to MP4. Don't waste your time with trying to use VideoStack with exotic video formats like m4v, m3u8, mov, flv or others, because the video is unlikely to be compatible with different web browsers.

If you want to improve the compatibility of playback, you can optionally provide the same video in WebM and OGV formats too. Until recently, these were an open source video format, which were the preferred format of web browsers like Firefox and Opera. Owing to MP4 licensing disputes being resolved, all mainstream web browsers now support MP4.

You must properly attach the video file using the Set Link buttons in the stack settings. Merely adding a video as a site resource in RapidWeaver or trying to drop it into your page is not sufficient!

The poster image specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead. The easiest way to create a poster image is to simply open the video in QuickTime Player or VLC and screen grab a frame of the video you want to use. Save the image in JPG format and save it to the same location as your video files.

While the stack is selected in edit mode, you can access its settings, in the Stacks side panel. Every setting displays a small informational tooltip on mouseover, to explain what it does. All the basic settings for your embedded video are available for you to change here.

Autoplaying video

In recent years, many browser vendors have moved towards only supporting video autoplay, if the video is accompanied with a mute attribute. Thankfully VideoStack gives you both autoplay and mute controls, to allow you to accomplish autoplaying video. The reasons why browser vendors have gone this route vary; with some suggesting it is to limit bandwidth consumption, others saying it is to limit intrusive advertising and others claiming it is to stop websites gaining too many app-like characteristics and to force developers into creating native apps and games to sell through app stores instead. Whichever one you believe, the reality is that most video will only autoplay if it's muted. Supplying a video without audio will also slightly reduce its overall file size.

Chapters

If enabled, chapter buttons are displayed under the video. These include basic style and colour options. The idea of chapters is to let the website user click and jump to a specific part of the video. As a basic example, if you published an hour-long video tutorial, the chapters in this stack will let the user navigate directly to different parts of the video. It's an alternative to splitting a long video into smaller clips and presenting it as a video playlist. As the video plays, the chapter buttons change colour to an 'active' state; denoting which part of the video is being watched.

Chapter buttons are tiled left to right on desktop. They display as a single column on mobile (below the default 40em breakpoint). If you want all screens to display the chapters in a single column, just increase the breakpoint setting to a high figure (e.g. 1000em). Custom CSS code can be applied to the buttons, if additional layout control or styling is desired. Font Awesome icons (and other icon libraries) are supported in chapter titles, if your theme includes this or similar icon libraries.

Subtitles and captions

These are optional and should be supplied in the standard WebVTT (web video text track) standard. If you do a web search, you will find details of this online. You are presented with a code interface to enter the list of subtitles or captions you want displayed. The code interface means that you are not limited in how many subtitles or captions you want to add to your video. It also makes it easier to delete or change the ordering of these files in future. Captions are typically used to display a video narration in different languages; whereas subtitles are used by hearing impaired users to understand what the video is talking about. For security reasons, some browsers will only support subtitles and captions if the WebVTT files are stored on the same domain as the VideoStack is being used on.

Copy protection

No copy protection is offered by this or any other video stack. Much like text or images on a website, if the users can see them on the screen, then they are already downloaded into the browser cache! If you consider the video too precious to display on a public facing website, then you will need to buy a stack like Lookup or Sentry to password protect it.

Making video banners

You'll need a compatible theme, like one of the designs from ThemeFlood, which has a suitable FreeStyle or ExtraContent container. Configure your video to autoplay and enable the mute setting. From the Placement menu, choose to use ExtraContent or FreeStyle, depending on what your theme supports and where you need the video shown. An optional setting is also provided to stretch the video beyond its normal size, if you need it to fill the full width of a header or banner container. It may be a good idea to use the Loop setting too, so the video plays indefinitely over and over again.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.