Player ID in Video Player

Developer Support CMS Development
1

I’m creating a custom module using the Video Player and trying to figure out how to extract the values for the Player ID and the Form ID. I.e. I want the user to be able to select the video from the file manager and the form from the form list. But I can’t figure out how to reference the needed values from these selectors. This is what I have so far. Any help would be greatly appreciated!

{% video_player "embed_player" overrideable=False, type='scriptV4', hide_playlist=True, viral_sharing=False, embed_button=False, width='600', height='375', player_id='{{ module.video_file.?player_id? }}', style='', conversion_asset='{"type":"FORM","id":"{{ module.video_exit_form.form_id }}","position":"POST"}' %}

37371i21637120A2CE57CF.jpg
37371i21637120A2CE57CF.jpg999×403 55.6 KB

2

Hi @beyhlh

Thank you for the information provided!

I’ll tag a few experts that can share their thoughts with you.

Hi @piersg @jonchim @Chris-M what tips/suggestions you have for @beyhlh ?

Thanks

Sharon

3

Hi @beyhlh (thanks @sharonlicari). Your video_file field is actually a File field instead of a video field. If you change it for a video field

module.video_field.player_id

will work.

The form_id is correct, however, I tried it and it didn’t work even with the id hardcoded into it instead of the HubL variable so I don’t know what’s wrong there. It might be something wrong with the Vidyard/Hubspot integration. @dennisedson do you know anything about it?

4

Not off the top of my head. Will have to test it myself later today and will get back to you!

5

FYI, confirming that it does not work for me as well. I am going to say it is how Vidyard handles the form, but I am unsure. Looking into it :+1:

6

@sharonlicari @piersg @dennisedson - Thank you all!

@piersg, thank you for pointing out the field difference. I felt like what I was trying to create should have been built in - and it was!
@dennisedson - When I try the setup using the snippet from the video field and select form as the overlay option, none of my forms are showing up in the section field. Is this the issue you’re seeing as well?

37475i0A0AA8B130AF446E.jpg
37475i0A0AA8B130AF446E.jpg998×385 98.2 KB

37473iD854581F11461AB6.png
37473iD854581F11461AB6.png383×882 39.7 KB

37474i3DBDE00B0B2A66F2.png
37474i3DBDE00B0B2A66F2.png999×598 66.4 KB

7

Yep, for some reason, the normal form id is not playing nice with Vidyard.

@piersg 's JS solution seems like the winner at this point.

8

@beyhlh If the Vidyard conversion asset isn’t working, you could do it yourself with JS using the Vidyard Player API. Their API is built in to the embed code.

e.g. the below. I would add the form in the HubL but hidden. Wrapped in a div something like:

<div class="hide" id="my-form">
 {# form code here #}
</div>

and then this code to your JS for the module.

let form = document.getElementById('my-form');

function onVideoCompletion(vidyardEmbed) {
 vidyardEmbed.api.progressEvents(function (result) {
 // code here to show popup or add your form to the page in some way
 form.classList.remove('hide');
 // 100 below means 100% of the video, i.e. the action above will happen at the end of the video
 }, [100]);
}

window.vidyardEmbed
 ? onVideoCompletion(window.vidyardEmbed)
 : (window.onVidyardAPI = (vidyardEmbed) => onVideoCompletion(vidyardEmbed));