Add an Image or Video to a Survey
Visual elements, such as images and videos, can provide additional context to survey questions and make your form more engaging and interesting for respondents. This example demonstrates how to add an image or video to a form or survey. Read more...
Visual elements, such as images and videos, can provide additional context to survey questions and make your form more engaging and interesting for respondents. This example demonstrates how to add an image or video to a form or survey.
To specify the image you want to add, assign an image URL or a Base64-encoded image to the
imageLink property. The value you assign to this property will be passed on to the
src attribute of the underlying
Base64-encoded content substantially increases the size of the resulting survey JSON object. We recommend using file URLs over Base64-encoded files whenever possible. In Survey Creator, you can upload files to a storage in order to save only their URLs in the
imageLinkproperty. Refer to the following demo for information on how to implement this functionality: Manage Image Uploads.
If you want to specify the size of your image, set the
imageWidth properties to positive numbers or CSS values. If your image should be resized to fit into its container, set the
imageFit property. For information on accepted values and how these values apply, refer to the
object-fit CSS property description. In this demo, you can change the
imageFit properties using the Settings panel.
Alternative text, or alt text, specifies a textual description of an image that is displayed if the image cannot be rendered. In addition, alt text enables search engines to correctly classify the image and helps users with visual impairments understand the image content using screen readers. To set alt text for your image, assign it to the
altText property. Its value will be passed on to the
alt attribute of the underlying
SurveyJS Form Library allows you to embed video files and YouTube videos. To add a video to your survey, follow the same steps as you do when adding an image. Create an object with a specified
name and the
type property set to
"image" and add this object to the
elements array. Assign a video URL to the
imageLink property. It supports links to YouTube videos and URLs of video files. If you want to resize the video, set the
As purely visual elements, images and videos do not support titles and descriptions out of the box. However, if you need to add a description, you can place your image or video into a panel or page and specify its
description property, as shown in this demo.