The video element lets you add a video to complement text and images, or even as a plain animation.

The video element works in two main ways, based on the video source. Hosting the video on Youtube or Vimeo is convenient and quick, hosting the video yourself gives you more control and is more friendly to visitors with respect to personal data privacy.

The settings for Youtube and Vimeo videos offer the ability to search for a video by keyword, or enter the video address or ID in the settings inspector directly.

The alternative to Youtube and Vimeo is to publish your own MP4 files. Sparkle checks that the MP4 file has an encoding that’s compatible with web browsers (unlike MP3, MP4 is a container format that can host video streams encoded in different ways, not all web compatible).

You can either switch the video source to “From Disk” or “From Network Location” and select the MP4 file disk location or network address, or you can drag and drop the MP4 file from the Finder straight into the Sparkle canvas.

From disk video files can be stored in their original location on your Mac, or in the project file. In either case they are always sent to your website when publishing, but if stored in the original location they will not burden your main project file.

Additionally you can scrub through the video (in the settings or on the Touch Bar), to set the poster image, which is the image shown before the video starts. This is what Sparkle’s video player looks like.

You can customize autoplay, looping and muting, in addition to the initial video volume. You can opt to have video controls or not, and a custom poster image if none of the video frames works.

Play While Scrolling, not available with YouTube or Vimeo videos, will disable video controls and advance video frames as the page is scrolled up, or go back if the page is scrolled down. For the best compatibility across browsers of the Play While Scrolling option, it is recommended that you encode the video with many keyframes, for example adding the keyint=30 setting in ffmpeg-based video encoders like Handbrake.

Regardless of the video source you can embed the video in the page in a few different ways, depending on the desired effect and design constraints.

Direct Embed loads the video player straight into the page. This has the effect of slightly slowing down the page load, but the playback will start faster. The site visitor will have the option to go fullscreen, but the video will otherwise play in the video element frame you have set. On mobile, video will always go fullscreen on playback.

Still + Embed only loads the poster image initially, then loads the video player on click, with the same characteristics of the directly embedded video.

Still + Embed in Lightbox loads the poster image initially, but on click loads the video in a lightbox. This gives you the option of making the video element smaller in the canvas, because it will always be played at a larger size.

The final option to link to the source site is only available for Youtube and Vimeo videos, its purpose is to avoid encumbering your site with privacy options that you might have to otherwise set.

Finally you can set opacity and animation for the video player.

Use of videos as page background is covered in the Page Setup section.

The video embedding settings

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Updated for Sparkle 5.2

Made with Sparkle

Copyright © Crinon SRL 

This website makes use of cookies.

Please see our privacy policy for details.

It’s Okay