Tutorial | Hide a Video Player When There's No Video

Learn how to automatically hide a video player element when the connected collection item has no video URL, instead of showing a default placeholder. This is useful when the page shows various collection items that contain multiple fields, and may or may not include a video.

In this tutorial we create a collection of minimal items, displayed in a repeater.

We'll use the following steps to create this functionality:

1. Create a collection.
2. Set up page elements.
3. Add code.

Step 1 | Create a collection

1. Create a collection with a URL type field. Name the field url.
2. Add to the collection at least 1 item with a valid video URL in the url field, and at least 1 item with an empty url field.

Step 2 | Add elements to your page

1. Add a repeater to your page. Set the repeater ID to repeater.
2. Connect the repeater to the collection.
3. Add a video player element to the repeater items.
4. Connect the video player to the collection.
5. Connect the video player's Video source to the url field.

Step 3 | Add frontend code

Add this code to your page to wait for the repeater items to load, and hide the video player in items that contain no video URL:

Test your implementation

In edit mode, video players will show some default content even if they don't contain a video. To test your implementation, preview your site. In items with an empty url field, the video player will automatically collapse.

See also

• About Collections
• Video Player API