Add support to play generic iframe video

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unpublished Changes
+* Add support to play generic iframe video
 
 ## 1.66.0 09-03-2024
 * Update Connatix script tag to use pmcCnx

packages/larva-js/src/interface/VideoShowcase/VideoShowcase.js

@@ -48,7 +48,7 @@
 			'href',
 		];
 
 		/**
 		 * State.
 		 *
 		 * @type {Object}
@@ -64,7 +64,7 @@
 			videoType: '',
 		};
 
 		/**
 		 * Player UI.
 		 *
 		 * Note: the title and dek are using class selectors so they can be added to existing patterns.
@@ -121,7 +121,7 @@
 		}
 	}
 
 	/**
 	 * Get Player Card Data.
 	 *
 	 * Set up a scaffold object that contains data from the trigger that will be applied
@@ -163,7 +163,7 @@
 		};
 	}
 
 	/**
 	 * Update Player Card Data.
 	 *
 	 * Apply the assembled data to the UI.
@@ -230,9 +230,10 @@
 			return `https://player.twitch.tv/?video=${ id }`;
 		}
 
-		if ( 'connatix' === type ) {
+		if ( 'connatix' === type || 'iframe' === type ) {
 			return id;
 		}
+
 	}
 
 	/**
@@ -283,7 +284,17 @@
 		);
 	}
 
+	/**
+	 * Remove hidden attribute from the iframe and set the src.
+	 *
+	 * @param {string} IframeUrl - Iframe embed URL from returnUrl.
+	 */
+	playIframeUrl( IframeUrl ) {
+		this.playerUI.iframe.removeAttribute( 'hidden' );
+		this.playerUI.iframe.setAttribute( 'src', IframeUrl );
+	}
+
 	/**
 	 * Remove hidden attribute from jwplayerContainer and play the video with the jwplayer API.
 	 * Note that `playlist` refers to a JWPlayer media object where the videos are handled within
 	 * JWPlayer not the playlist taxonomy in WordPress.
@@ -309,7 +320,7 @@
 		}
 	}
 
 	/**
 	 * Trigger Click Handler.
 	 *
 	 * Reset player from previous state, update state and player UI, play the video.
@@ -366,6 +377,10 @@
 			const playerId = this.playerUI.player.dataset.videoPlayerId;
 			this.playConnatix( url, playerId );
 		}
+
+		if ( 'iframe' === state.videoType ) {
+			this.playIframeUrl( url );
+		}
 	}
 
 	// Remove any trigger-related data attributes and hide any elements that are not relevant for the player.