CMS Development

SStrickler
Member

Video Landing page

SOLVE

Hi there. I'm looking for a hubspot video landing page template (or solution) that would allow us to have one landing page that houses a series of videos on a topic.

 

When clicked, each video would play on its own unique URL (not a unique page). The point of this would be so that we could send an email to a specific video clip that would be the featured video on this page initially.

 

When the video is finished, the user would close out of that video and see the other videos in this series and choose another one without leaving the page. It would essentially be a media query for that video...

  • myURL.com/video-landing-page&video-clip-1

We will be creating an email sequence that link to a series of videos, but I only want one landing page, not 10. Our videos are hosted in Wistia if that matters. 

0 Upvotes
1 Accepted solution
LMeert
Solution
Guide | Platinum Partner
Guide | Platinum Partner

Video Landing page

SOLVE

Hi @SStrickler,

 

Do you want all the videos to be visible at all times or just the one the user is supposed to watch ?

If it's the former and you want it to be super simple, simply adding the many videos on the page with an anchor for each video will do.


Otherwise you will have to use javascript to change the url of the video embed based on the url parameter.
You could also design a module that will display the video player as well as clickable thumbnails of the other videos on the page. Clicking on a thumbnail would load the right video in the player.

 

The wistia documentation has a great example of dynamically changing the source of the video player :
https://wistia.com/support/developers/embed-links

You can simply reproduce the steps of the example and add the dynamic loading of the video based on some query parameters you will pass in the page url. You can use the function below and run a getVideoUrl to get the right url and load the video player with the correct video.

function getVideoUrl() {

   const queryString = window.location.search;
   const parameters = new URLSearchParams(queryString);
   const value = parameters.get('video_url');

   return value;
}

 

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

 

Best,

Ludwig

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

View solution in original post

0 Upvotes
2 Replies 2
LMeert
Solution
Guide | Platinum Partner
Guide | Platinum Partner

Video Landing page

SOLVE

Hi @SStrickler,

 

Do you want all the videos to be visible at all times or just the one the user is supposed to watch ?

If it's the former and you want it to be super simple, simply adding the many videos on the page with an anchor for each video will do.


Otherwise you will have to use javascript to change the url of the video embed based on the url parameter.
You could also design a module that will display the video player as well as clickable thumbnails of the other videos on the page. Clicking on a thumbnail would load the right video in the player.

 

The wistia documentation has a great example of dynamically changing the source of the video player :
https://wistia.com/support/developers/embed-links

You can simply reproduce the steps of the example and add the dynamic loading of the video based on some query parameters you will pass in the page url. You can use the function below and run a getVideoUrl to get the right url and load the video player with the correct video.

function getVideoUrl() {

   const queryString = window.location.search;
   const parameters = new URLSearchParams(queryString);
   const value = parameters.get('video_url');

   return value;
}

 

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

 

Best,

Ludwig

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

0 Upvotes
SStrickler
Member

Video Landing page

SOLVE
Great. I'll pass this along to our team and let you know if they have success. Thank you!
0 Upvotes