Designer Courses / Getting Started

Adding Images and Videos

In this lesson we are going to cover adding images, and videos to an experience. To demonstrate this, we are going to start with a completely blank canvas and pull in some images and videos from our desktop. To follow along with our build, download the files below and unzip them to your desktop.

Adding Images to Ceros

To get images and videos into your experience, you can simply locate them on your desktop, and drag them directly onto the Ceros canvas. Ceros can accept most image file formats, including JPEG, PNG, SVG and Gifs.

One thing to take note of when you add images from your desktop to the canvas is Ceros experiences are automatically optimized for retina screens which have twice the amount of pixels per inch. So to get a 100x100px image in Ceros, it would have to be saved as a 200x200px image on your desktop.

Once uploaded, the Ceros platform does a ton of optimization to your images to prepare them for web. For one, Ceros automatically creates different size versions of each image. This way, we can serve up the most appropriate image size based on the device it’s being viewed on, which significantly helps load times.

Adding images and videos

Adding Videos to Ceros

Videos can be uploaded using the exact same steps as images, and will be saved with similar optimization techniques to lower load time. Ceros will also accept most movie file formats like MOV, MPEG, MP4, AVI and more. Once uploaded, you have numerous customization options to choose from in the settings pane of the inspector panel. In this menu, you can set the video to autoplay when the user scrolls to that portion of the screen, hide the player controls completely, customize the preview image, and also specify how videos react to different types of browsers. Recently, Chrome, Safari, and Firefox made changes to what videos they allow to autoplay agreeing to only autoplay videos when they are muted by default. You can ensure your videos adhere to this rule, as well as provide a fall-back option in this menu.

If you have any questions or concerns about adding images or videos, please reach out to us through the chat widget and we’ll be happy to help. Also, be sure to check out our other getting started modules for how to embed Youtube and Vimeo videos using the embedded object functionality.

Adding Images and Videos