Jekyll One

Fulltext Search

The J1 Template plays video on web pages using HTML5 video — the modern web standard. Every up-to-date browser already knows how to play HTML5 video, so your visitors do not need to install any extra software or plugin.

Older tools such as Flash Player, QuickTime, and Silverlight are no longer needed — and most browsers do not even support them anymore. Modern browsers can play videos right out of the box, both from your own website and from online sources like YouTube.

5-10 Minutes to read.

HTML 5 Video

HTML5 video lets you place video files directly on your website. The browser does the rest: it loads the file, plays it, and shows the standard playback controls.

The J1 Template supports two kinds of video sources:

  • Local video — video files stored on your own website,

  • Online video — video from a streaming service such as YouTube.

An embedded video player shows the video right inside the page, without sending visitors to another site. This makes a smoother experience for your audience and keeps them on your website.

The video tag <video> is built into every modern browser. You do not have to load any external player to make it work.

Peck Pocketed · Local Video over HTML5 Video
Your browser does not support the video tag.

VideoJS

VideoJS is a free, open-source video player for the web. The J1 Template uses VideoJS to play your own video files and video from several online platforms such as YouTube.

VideoJS supports plugins that add new features. With plugins, the same player can show videos from many different sources, all with the same look and feel — a much better experience for your visitors.

Local Video

With VideoJS, you can play local MP4 video files in a customizable player that matches your site design.

Peck Pocketed · Local Video over VideoJS

YouTube

The J1 Template can also embed videos straight from YouTube. Just give the YouTube video ID and the player appears on your page.

Sky Elements uses the night sky as its canvas. A large group of drones fly in formation to paint pictures of light, telling stories that are hard to forget.

Sky Elements · AGT 2024

Galleries of Video

A video gallery is a collection of videos shown together, often around a theme or topic. The gallery module in the J1 Template is called lightGallery — a fast and modular plugin for building good-looking image and video galleries.

When you combine a gallery with a lightbox, your visitors can browse the videos easily and watch them in a focused, full-screen view. You can place a video gallery anywhere — on a regular page, in a blog post, or on a landing page. The J1 Template combines justifiedGallery (for the layout) with lightGallery (for the lightbox), making it easy to build a video gallery in just a few lines.

lightGallery is free for private use. If you want to use it on a commercial or business website, you need a paid license. See lightGallery Licenses for the current pricing and terms.

Below you will find two examples: a gallery of local MP4 videos and a gallery of YouTube videos.

Local Video

Have videos you took with your phone or camera? You can show them on your website using the J1 Template’s lightGallery integration.

The maximum size for a local video file is 50 megabytes. With a modern MP4 encoder you can fit:

  • about 3-5 minutes of HD 1080p video (1920 x 1080 pixels), or

  • up to 10 minutes of HD 720p video (1280 x 720 pixels).

Local MP4 Video · Justified Gallery + LightGallery

YouTube

YouTube is the largest video platform on the Internet. With the J1 Template, you can pick a selection of YouTube videos and show them as a single gallery on your page — great for music collections, tutorials, or interviews.

YouTube Video · justifiedGallery + LightGallery

What next

Images and videos can be powerful, but on most websites the most important element is still the text — and how that text looks.

Many website templates do not handle text well on different screen sizes. They resize boxes and images, but the text size stays the same. The J1 Template fixes this with responsive text: text that automatically scales in size and line height to stay easy to read on every device.

In the J1 Template, typography — the way text looks — is treated as one of the most important branding elements of your website. Good typography gives your site a clear character, almost like a logo.

Want to see how it works? Move on to Typography.