---
title:                                  Present Videos
tagline:                                Playing Video On Webpages
date:                                   2020-11-04 00:00:00 +100
description: >
                                        The J1 Theme support playing video on web pages by HTML5 Video,
                                        the new standard of HTML. HTML5 Video implements a pure HTML way
                                        to show video on the web. Modern browsers support the video tag
                                        `<video>` for the HTML5 video standard. The previous proprietary
                                        de facto standard software like Flash Player, Quicktime, or
                                        Silverlight is no longer needed as the Jekyll theme JekyllOne
                                        provides HTML5 Video support for local video content and from
                                        online sources on the Internet.

keywords: >
                                        Jekyll, Theme, JekyllOne, HTML5, Video, Support, Flash Player,
                                        Quicktime, Silverlight, Roundtrip

categories:                             [ Roundtrip ]
tags:                                   [ Module, Video ]

image:
  path:                                 /assets/videos/headers/present_videos/still/underground-broadway.jpg
  width:                                1920
  height:                               1280
  alt:                                  Broadway Underground

permalink:                              /pages/public/learn/roundtrip/present_videos/
regenerate:                             false
personalization:                        true

resources:                              [
                                          animate, lightGallery, justifiedGallery, video_js,
                                          vimeo_player, vimeo_froogaloop
                                        ]
resource_options:
  - attic:

      slides:

        # Broadway Underground - still image (animate default)
        - url:                          /assets/videos/headers/present_videos/still/underground-broadway.jpg
          alt:                          Broadway Underground
          title:                        Present Videos
          tagline:                      Playing Video On Webpages
          alignY:                       top
          animateFirst:                 false

        # Broadway Underground - FAYETTE ST, moved file to Github/LFS
        - url:                          /assets/videos/headers/present_videos/underground-broadway.mp4
          alt:                          Broadway Underground Video
          title:                        Present Videos
          tagline:                      Broadway Underground
          alignY:                       0
          isVideo:                      true
          loop:                         false
          duration:                     12000

        # Broadway Underground - still image (animate random)
        - url:                          /assets/videos/headers/present_videos/still/underground-broadway.jpg
          alt:                          Broadway Underground
          title:                        Present Videos
          tagline:                      Manage Video Content For Your Site
          alignY:                       top
          transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut
---

// Page Initializer
// =============================================================================
// Enable the Liquid Preprocessor
:page-liquid:

// Set (local) page attributes here
// -----------------------------------------------------------------------------
// :page--attr:                         <attr-value>
:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images

//  Load Liquid procedures
// -----------------------------------------------------------------------------
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes
// -----------------------------------------------------------------------------
{% include {{load_attributes}} scope="all" %}


// Page content
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[role="dropcap"]
The J1 Theme support playing video on web pages by HTML5 Video, the new
standard of HTML. HTML5 Video implements a pure HTML way to show video
on the web.

Modern browsers support the video tag `<video>` for the HTML5
video standard. The previous proprietary de facto standard software like
_Flash Player_, _Quicktime, or _Silverlight_ is no longer needed as the
Jekyll theme JekyllOne provides HTML5 Video support for local video content
and from online sources on the Internet.

// Include sub-documents (if any)
// -----------------------------------------------------------------------------
[role="mt-4"]
== Video Galleries

HTML5 Video opens the doors to your way of presenting video content. Modern
browsers support the video tag `<video>` for the HTML5 video standard.
Browsers have a built-in multimedia framework already for decoding and displaying
video content. No need to use such proprietary software components anymore!

HTML5 Video support is given by the App gallery combined with the lightbox
LightGallery.

Two types of video sources are supported:

. Video files from local folders (your webspace)
. Video files from online sources (on the Internet) like YouTube, Vimeo, etc.

The combination of the App gallery and the lightbox LightGallery is entirely
usable for all the video content you want to present on your site. You can
place Galleries elsewhere with your content. You can use them for video blogs
by putting them into your blog article's content.

WARNING: LightGallery can be used for free for private use, but a commercial
license is needed for business use. See
link:{url-light-gallery--license}[LightGallery licenses, {browser-window--new}]
how to use LightGallery for commercial websites and projects.

== Local Video content

Digital image content, simple pictures or videos, are easy to make. Today,
every mobile has a camera. Presenting a bunch of (digital) pictures is done
very easily by using Justified Gallery. Videos created by a digicam or a mobile
can be played by J1 Theme using the HTML5 Video support. Present videos you
have made at it's best.

Two players are available with LightGallery:

. an internal player used by default
. {url-videojs--home}[video.js, {browser-window--new}], a excellent
  Javascript video library including a great player

NOTE: The HTML5 specification does *not* define which video and audio formats
browsers *should* support. J1 LightGallery can play all types of standard
HTML5 Video formats on modern browsers today (MP4, WebM, and Ogg).

.MP4 Videos - VideoJS Player
gallery::jg_video_html5[role="mb-5"]

== Online Video content

The Internet is full of inspiring content. If you want to present video
content from the Internet, the online video support of J1 Theme is the
right choice.

=== YouTube

The community at link:{url-youtube--home}[YouTube, {browser-window--new}] is
large, with over 1 billion users that watch hundreds of millions of hours of
content every day. The number of channels on YouTube is enormous. For TV
Stations, it's a must to publish videos of their shows on YouTube. Find below
a current gallery from *The Voice Kids* (SAT.1) Germany and a real classic
channel *Carpool Karaoke* from the frontman James Corden of *The Late Late Show*
at CBS, Los Angeles.

.The Voice Kids, Germany 2021
gallery::jg_video_online_youtube_2[role="mb-5"]

.James Cordon's Carpool Karaoke
gallery::jg_video_online_youtube[role="mb-5"]

=== Vimeo

link:{url-vimeo--home}[Vimeo, {browser-window--new}] is a video-sharing
platform that includes features such as live-streaming and customization.
Vimeo provides many tools for video creation, editing, and broadcasting.
The platform provides you with an excellent channel to present high-quality,
professional videos and reach audiences worldwide.

Vimeo does offer a basic, free membership, but it limits you to 500MB maximum
storage per week. Alternately, you can book on paid plans: Plus, PRO, Business.
Each membership has varied storage limits, but the free plan offers sufficient
space for private projects to present video content without advertising.

NOTE: A great plus using Vimeo is that *no advertising* is used on that
platform.

.Vimeo Video Gallery - Fashion
gallery::jg_video_online_vimeo[role="mb-5"]

=== DailyMotion

link:{url-dailymotion--home}[Dailymotion, {browser-window--new}] is a French
video-sharing technology platform primarily owned by
link:{url-vivendi--home}[Vivendi, {browser-window--new}]. The platform is
available worldwide in 183 languages and 43 localised versions featuring local
home pages and local content.

The platform is a monetization solution that allows allows to directly connect
to high-quality advertisers through a proprietary Advertising Solution. Like
YouTube, videos cav be watched for free, but ads are shown on each and every
video.

Dailymotion allows users to search videos by *tags*, topic *channels*, or
user-created *groups*. Users can upload videos of up to 2 gigabytes and a
length of 60 minutes. If a user is a MotionMaker or MotionPartner, a program
for particularly creative users or partners, they can upload videos of
unlimited length.

NOTE: Like YouTube, DailyMotion is a commercial platform using *advertising*
on all video content. On every video, an ad clip is presented of 15 to
30 seconds in length.

.DailyMotion Video Gallery - SELF Magazine (Channel)
gallery::jg_video_online_dailymotion[role="mb-5"]

=== VK

link:{url-vk--home}[VK, {browser-window--new}], former Vkontakte.ru until
January 2012, is a multilingual social network operated from Russia.
Registered users can create a profile on VK and exchange information with
other users.

According to the operator, the platform has over 100 million active users,
but mainly in Russia, Ukraine, and other Russian spoken countries. VK is
among the most popular websites in Russia.

NOTE: VK is accused of insufficient protection of personal data. The platform
is also openly criticized by neo-Nazi and neo-fascist Groups used without
there being a handle against them so far. To date, the Russian investigative
authorities (especially the FSB) have not made any efforts to identify
right-wing extremists or to suppress racist currents on the platform.

.VK Video Gallery - Wildlife
gallery::jg_video_online_vk[role="mb-5"]


== What next

Images and videos are pretty visual. And it can be impressive, for sure.
But the most visual component is the text for all pages, for all sites on the
Internet. To see how text could be presented great for modern responsive
websites, check the section Typography next.

What? Please find out how it works.
Go for: link:{url-roundtrip--typography}[Typography], then.