Display a Different Video in an iframe from a Collection based on Date

Ask the community
,
1

Hi there,
I am working on my very first Wix site and I’ve run into the following problem: I have a Collection called “videos” with the following columns: title, videoUrl, date. On my webpage, I have dragged the “Embed Website” component onto the page, and in my code I’m trying to populate the src of the iframe with the videoURL from the Collection with a date that matches today’s date.

I’m using this solution as a reference: https://www.wix.com/velo/forum/community-discussion/display-different-a-image-from-a-db-based-on-date-range

But it’s not working for me and I cannot figure out my mistake. My site is unpublished and I am querying the collection directly, not using a dataset. I’ve been testing by clicking the preview button, but nothing in the iframe renders.

Any help would be greatly appreciated!

Here is my full code:

2

I think I figured it out.

#1 - It helps if I have Dev Mode turned on, doh!
#2 - I ditched the iframe and used a single video player
#3 - I needed to use the # Id in the upper left corner of the video player in order to reference it in my code
#4 - I can reference my collection directly in the code but I need to use the the Collection Id, located under the Collection Settings and not the Collection name
#5 - I couldn’t get .eq() to work because the date in my collection was formatted as date/time and I couldn’t figure out how to change the type to just Date. So my workaround was to order the query results by date descending and use .le() to compare the dates.

Working Code:
import wixData from ‘wix-data’ ;

$w.onReady( function () {
let todayDate = new Date();

wixData.query( "videos" ) 
.descending( "playDate" ) 
.le( 'playDate' , todayDate) 
.find() 
.then( (results)=> {

if (results.items.length > 0 ) {
$w( “#videoPlayer1” ).src = results.items[ 0 ].videoUrl;
} else {
$w( “#videoPlayer1” ).src = “my default video url” ;
}
})
});