How to place video on a page
They say “a picture is worth a thousand words.” So how many words is video worth? Can words replace an image or vice versa? A masterfully written article can never be replaced with just one still image, which, in turn, is sometimes impossible to describe with a thousand words. There’s a place for written words and there’s a place for still images, and, of course, there’s a place for video as well. Because it’s become such a popular medium Edition Digital offers not one but two different ways of using videos within your digital Editions: upload MP4 video files to our server or embed videos from YouTube.
To add a video launch the Design tool, open the Edition, and select the page where you want to add your video files. You don’t need to stick to that exact order because there are actually a couple of ways you can do it. For instance, if you're already within the Workflow, it’s easiest to select a page and launch the design tool from the Pages tab. Alternatively, you can launch the Design tool by clicking DESIGN from the main menu. After the Design tool opens, it will prompt you to select the Edition, which will be opened on the first page. Then, just use the page navigation arrows in the upper right corner to find the desired page.
When you reach the desired page, select the Video tool from the left-hand tools panel, move the tool over to the working area and create the video element by dragging your mouse across the area where you want the element to be placed. When you release your mouse button a new video element that’s represented with a play icon will be created, but at that point it still needs the actual video file or url. Now, turn your attention to the right-hand Audio panel where you’ll see a few options depending on the video type that you would like to add, which is the first option at the top of the panel.
When you select the MP4 File option you can use your own video file to be displayed within the currently selected video element. If you have your Windows explorer - or the equivalent of another operating system - with the assets for your Edtion already opened, you can quickly grab the video file, and drop it in the designated area. Otherwise, you can click the “Drop your files here or click to upload” area to open your operating system’s file explorer and select your video file that way. The system will then start uploading the file and when that completes the video appears in the panel itself so you can quickly check if you’ve uploaded the correct one. Same goes for the poster image that will appear when the video isn’t playing; simply click the Upload button and select an image from your device. All though it’s not necessary to provide one, a poster image will look much nicer than the default black, which appears if there’s no poster image present.
To support video playback on as many devices as possible, we’ve decided to go with the MP4 video format. So be sure to check that your videos are consistent with the following specifications:
- Codec: H.264
- Profile: Main
- Aspect Ratio: 16:9
- Frames per second: up to 30
- Resolution: up to 1080p, recommended 720p
- Bit rate: up to 3500 kbps, recommended 2000 kbps
- Recommended video file size: up to 24MB (megabytes)
However, there are browser versions that prefer other video formats over MP4. That's why we've enabled you to provide a WebM version of your video as well. The combination of these two formats will cover all browsers in use today.
When all files are uploaded, you can look at the preview by clicking the Preview button in the upper section of the Design tool. The page where you’ve placed the video element will display the system’s default video player that your readers can click or tap to start or stop the video playback, jump to a specific time of the video, change the audio volume, and initiate the full-screen viewing experience.
If your videos are hosted on YouTube it couldn’t be easier to embed them on the page of your edition. To do that, create a video element on the page and turn your attention to the Video panel where you need to select YouTube as the video type. Now jump over to the YouTube website find the video you want to use and copy the video’s url address. Then go back to the Design tool and paste the video url in the designated bracket. After that’s done, you’ll notice the poster image automatically update to the one that’s already defined by YouTube. However, if you want to use your own poster image, click Change file and provide your own.
To see the newly embedded video in action, click the Preview button in the upper section of the Design tool. The page where you’ve placed the video element will display the YouTube video player that we all know so well.