Collapse 2nd Video Player Not Working - Re:"Hiding a Video Player When There Is No Video to Play"

Ask the community
, , ,
1

Hi everyone!

I am building is a portfolio website demonstrating video work via dynamic pages.
Each dynamic page always has at least one video URL in a video player but sometimes I would like the option to have a 2nd video URL (Video Url #2) in a 2nd video player (#videoPlayer2)

When the dataset for Video Url #2 doesn’t exist in the dataset, I would like #videoPlayer2 to collapse.

I am aware of this tutorial: Hiding a Video Player When There Is No Video to Play
and have copy/pasted and modified the code without success.

Any help would be greatly appreciated!

I have created this code and injected it onto the dynamic page:

Code:

$w.onReady(() => {
  $w("#ourwork-dataset").onReady(() => {
    // Gets the current item properties and stores them in a variable called item
    const item = $w("#ourwork-dataset").getCurrentItem();
    // Checks if the current item has a value in the "video" field
    if (!item.video) {
      // Collapses the video player if there is no value for "video"
      $w("#videoPlayer2").collapse();
    }
  });
});

Untitled 2223323
Untitled 22233231350×3300 247 KB

Everything I’ve tried to do to fix it will either create this same problem, or cause the 2nd video player to disappear completely.

Thank you for your time and assistance!

1 Like
2
  1. Better you do not use ID’S like → ‘ourwork-dataset’
    Better you use underscores ------> ‘ourwork_dataset’
    Or you do it like 80% would do → ‘ourworkDataset’
    Or you do it my way -----------------> ‘dstOurWork’

Why better going my way?
What is dst, what does it stands for ?
And why the position-switch ?

Using → - ← in your ID’S is not one of best ideas.

  1. Maybe you first check on your own, if the data is exactly the same, like you expect it to be, by using some → CONSOLE-LOGS ← !!!
$w.onReady(()=> {console.log('Page is ready...');
    $w("#ourwork_dataset").onReady(()=> {console.log('Dataset is ready...');   
      const item = $w("#ourwork_dataset").getCurrentItem(); console.log('ITEM: ', item);
      //...more code
      //...more code
      //...more code
      //...more code
    });
});

What do you get as result for → ‘item’ <— in your console?

3

Amazing! Thanks so much for your help.
Removing the dash seems to have fixed it

2 Likes
4

If your issue is resolved then mark it as → RESOLVED <–, thanks and see you maybe next time again :wink:

5

Hi @CODE-NINJA

Upon checking today, it seems that videoplayer 2 has disappeared on all pages…
I’m not sure why I thought it was resolved earlier.

Do you have any ideas why this could be happening?

6

Well, it is difficult to say what’S going on on your side, since you do not provide any details on your setup.

What you should first check..???

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

I think all of that you have done and checked already.

Your current STARTING code should be right now…

//-------------- USER-INTERFACE -----------------
const DATASET = 'dtsOurWork';

$w.onReady(()=> {console.log('Page is ready...');
    $w(`#${DATASET}`).onReady(()=> {console.log('Dataset is ready...');   
      const item = $w(`#${DATASET}`).getCurrentItem(); console.log('ITEM: ', item);
            
      //...more code
      //...more code
      //...more code
      //...more code
    });
});

Your dataset will be connected to your Or-Work-Database i think.
Inside your database you will have several different FIELDS (PROPERTIES) including → a FIELD of TYPE → URL <–. This field will include the right VIDEO-URL.

Like already shown in example → the following code-part do exactly what you want to achieve. It sets a IF-CONDITION to check wether there is URL available or not.

    if (!item.video) {
      // Collapses the video player if there is no value for "video"
      $w("#videoPlayer").collapse();
    }

If VIDEO-URL not available → it will collapse the chosen Videoplayer.

So let us UPGRADE your code to make things a little bit cleaner…

//-------------- USER-INTERFACE -----------------
const DATASET = 'dtsOurWork';
const vidPLAYER1 = 'videoPlayer1';
const vidPLAYER2 = 'videoPlayer2';
//-------------- USER-INTERFACE -----------------

$w.onReady(()=> {console.log('Page is ready...');
    $w(`#${DATASET}`).onReady(async()=> {console.log('Dataset is ready...');   
      const item = $w(`#${DATASET}`).getCurrentItem(); console.log('ITEM: ', item);            
      if (!item.video) {console.log('...no video-URL found...');
        await $w(`#${vidPLAYER2}`).hide('fade');
        $w(`#${vidPLAYER2}`).collapse();
      }
      else {console.log('...video-URL found...');
        $w(`#${vidPLAYER2}`).expand();
        $w(`#${vidPLAYER2}`).show('fade');
      }
      //...more code
      //...more code
      //...more code
      //...more code
    });
});

So now you have a full setup for your "videoPlayer2’’ or however is the ID of your VIDEO-PLAYER-2.

You can expand your code at anytime, adding more functionality into your setup.
My assumtion might be, that you had a missing code-part, this is why your vide-player disappeared and did not come back. And maybe this is why you were thinking sometimes it is available, but once URL was missing it disappeared and did not come back!

Edit:
Make sure you adjust all your elementIDs like shown inside my code.

  • for vide-player-2
  • for dataset
    You will find them inside the generated USER-INTERFACE.
1 Like