We live in a world where images and video are now the primary ways of communicating to friends, family, customers and clients both locally and throughout the world. Visual communication has always been a great way to convey thoughts, ideas and concepts that would otherwise take hundreds of words to do. Visual communication is often instantly understandable and can transcend language barriers.
The same style of communication can, and often should, be applied when you build your own website. As well as communicating more effectively to your visitors, you also save yourself time and effort in applying visual and media based communication to your site.
In this post, we’re going to look at adding video to your site and what’s available within EverWeb itself and what’s available from third parties…
Video Files Formats in EverWeb
Let’s start with video files themselves and how they’re used in EverWeb. The first thing to note is that video can come in a number of different formats, but generally the most common format you will come across is the MP4 video file format, also known a MPEG-4. This file format acts as a ‘container’ format for video and audio and is the standard for streaming. Other formats also exist such as MOV, WebM and OGG formats that are proprietary and less commonly used.
Out of the box, EverWeb includes support for MP4 files with its Video widget. This widget also supports the WebM and OGG legacy file formats. the YouTube, Video, Vimeo and FlexBox widgets.
There are a number of different ways in which you can create a responsive Video Gallery in EverWeb but you can only add a video to a regular page in EverWeb via a widget.
When thinking about adding video to your website you’ll want to consider three main things:
- Video File Size: Video files take space, sometimes a lot of space! You can import your video files directly in to your EverWeb Project file. This file will be displayed in the Assets List as an ‘External File’. Whilst this is fine to do, bear in mind that adding large files to your Project will increase the size of the Project file itself so will increase the amount of disk space the Project takes on your computer. Large Project files may also become slower to load and edit too. Remember as well that uploading your website to your server will take more time, and you may find page load speeds are slower for your visitors too.
- Storing Video Files: The best solution to the problem of large video files is to use a service such as YouTube or Vimeo to store your files instead of keeping them in your Project file. When uploading files to these services, they will be optimized by the service so that they are faster to stream. The other advantage is that you have a library of videos that are online to a wider, or even specific, audience. The downside is that you may not videos to be in the public domain but limited to a specific audience. If this is the case, then seek out services that meet such a requirement (such as Vimeo for example) or store your videos in your Project file.
- Linking to Your Videos: Whether you are using a service to store and stream your videos or are using videos as External files in your Project, using the videos in your site is easy. EverWeb comes with a Video, Vimeo and You Tube widget built in. The Video widget uses MP4 files but also supports the old WebM and OGG legacy formats. When using these widgets all you need to do is either select the video file you want from the Choose.. button, or fill in the link to the video in the service of your choice.Usually services such as YouTube allow you to copy the link completely when you choose the Share option on a video. Just choose to copy the link then paste it in to the field in EverWeb. Sometimes you may see that the link gets truncated in EverWeb but that’s OK. When you have linked or added your video to the widget of your choice, it usually will be displayed in the Editor Window and will typically be displayed if you preview your page before publishing.
The FlexBox Widget and Video Files
EverWeb has one more built in widget that can handle video and that’s the FlexBox widget. When you add an embedded object to the FlexBox widget, you have the options of three different ‘Object Types’: Styled Text, Image or Video. If you use the Video option, you will be able to add a link to a YouTube video in the ‘Video URL’ field.
Adding Videos in Blog Posts
If you are using EverWeb 3.9.1 or higher, you can easily add videos in to your blog posts. Here’s how…
- First add the video files you want to use in your blog in to the Assets List.
- To do this, click on the Assets tab in the Inspector Window then drag and drop the video files you want to use from their source in to the Assets List.
- The files will be added as External files.
- Next right, or secondary click on the video file you want to insert in to your blog post.
- From the menu select ‘Copy Relative File Path’. The relative file path will be copied to the Clipboard.
- Now go to your blog Posts page and select the post that you want to add the video file to.
- Place the cursor at the point in the post where you want to insert the video.
- In the Post Editor Toolbar, click on the Video camera icon.
- Paste in the Relative File Path from the Clipboard, then click on ‘Insert’.
- The video file will be inserted in to the post.
In a future post, we’ll explore more about using third party widgets to add videos to your website as well as adding video galleries!
If you have a question or comment about this post, please let us know in the Comments Section! Thanks!