Velo Tutorial: Hiding a Video Player When There Is No Video to Play

When you connect a Video Player element to a URL field in your collection, when the page is viewed, the player displays the associated video. If there is no URL for a given item, the video player displays the default video defined in its Social Video Settings panel.

If you'd rather not have any video play, you can automatically hide the Video Player when the item in your collection has no URL. This tutorial shows you how to do this using Velo.

This tutorial has 2 parts:

• Instructions on how to get set up, including code you can copy and paste onto your page
• An explanation of what each line of code does

Instructions

1. Add a dataset to your page and connect it to your collection.
2. Add a Video Player and connect it to the URL field.
3. Open the the code editor for your page.
4. Copy and paste the code below.

1. Make sure to make these replacements:

   • #myDataset: the ID of the dataset

   • video: the field ID of the field in your collection that stores the video URL

   • #videoPlayer: the ID of the video player

2.  Preview your page for an item that does not have a URL and check that the video player is not displayed.

Understanding the Code

This section explains the main lines of the code. Each function has a link to its more detailed explanation in the wix-dataset API.

Line 1 calls the onReady() function. This defines the code that will run when the page is finished loading.

Line 2 calls the dataset onReady() function. This defines the code that will run after the dataset has loaded all the information for the current item.

Line 4 defines a variable called item and then sets its value to be the object returned by the getCurrentItem() function.

This object contains the properties (fields) in the current item and their respective values. When a given field is blank in the current item, the object does not contain the corresponding property.

Line 6 checks to see if the item variable from the previous line includes the video field, which is the field in the collection that stores the video URL.

If the current item's video field is empty, then that field is not included in the object that was returned by getCurrentItem() in the previous line.

Line 8 collapses the video player if the video field is blank.

If the video field is not blank, then this line does not run. The video player remains visible to show the video at the URL defined in your collection for this item.

You could also use the hide() function to hide the video player instead of collapsing it.