External video popup triggered by button for Wistia


(Alex D) #1

hi,

how can I achieve this result in Hype?
http://mcm1966.com/test/lookbook-7.html
it’s a button, showing some opacity changes on hover, that triggers a script to popup a video from Wistia. Actually, there’s three of them on that page

thanks
Alex


#2

Hi Alex,

I think you would be basing this on this documentation section: https://wistia.com/support/developers/popover-customization

You would add your embed script to the <head> of your page. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

Next, you would create a rectangle and insert the Wistia embed code inside. This seems like a good format: https://wistia.com/support/developers/popover-customization#popovercontent

For this method, you would use this code:

<div class="wistia_embed wistia_async_5bbw8l7kl5 popover=true" style="width:300px;height:150px;">&nbsp;</div>

Here’s a quick demo:

demo.zip (63.2 KB)


(Alex D) #3

hi Daniel,

so first, for each Wistia clip the code is provided to just copy and paste in your document. Second, I see in your example you attached the code to a rectangle (I didn’t know you can do that…, but then I’m a beginner), which acts differently than a HTML element, which basically is an iframe, while the rectangle makes the popup pop… and I want it to pop! Third, when I insert the copied code in the image html, it will expand, and it can not be edited, I guess it keeps the contact with the mother ship. I would like to not have the thumbnail showing and I would like to expand the clickable area to my whole image.

I have two options to generate the code from wistia, to show the thumbnail or to have a clickable text link. The problem with clickable text link is that, of course, you have to click the text… In my attached file in the first scene the firs image is with thumbnail, the second is with text, the third is with the iframe. In the second scene, I thought of having the iframe covering the whole page, with text link, which I assume can be replaced with #, so it won’t show, my question is can i have a button triggering the link in the HTML widget?

mcm1966-test.hype.zip (1.2 MB)


(Alex D) #4

I guess that was a hard question…


(Mark Hunte) #5

Maybe…

Put the assets script link and video links only in the head. i.e

  <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>

    <script src="https://fast.wistia.com/embed/medias/l4z33jch5y.jsonp" async></script>
    <script src="https://fast.wistia.com/embed/medias/yiu29pizzj.jsonp" async></script>
    <script src="https://fast.wistia.com/embed/medias/jlmqgcxuh7.jsonp" async></script>

Then

1, Add a blank rect.

2, Give the rect the classes that matches the video id. for example video 'yiu29pizzj ’

wistia_embed wistia_async_yiu29pizzj popover=true popoverContent=link wistia_embed_initialized

Yes all of that.

3, Give the rect a image background using the choose image…

4, Set the group’s Pointer from Automatic to pointy hand


wistia_embed wistia_Test_MV1.hype 2.zip (567.9 KB)


(Alex D) #6

hi Mark

Yes, it works, thanks!

I guess you edited your answer after posting, (in my email I got your initial reply) because apparently there’s no need to group anything, just a rectangle with a background image, the class you mention and a change of the mouse pointer seems to be enough. If so, maybe you want to change in your step 4, the word “group” with “rectangle”, in case it might be useful to others too.

thanks again
Alex


(Alex D) #7

new problem… this project has several pages (14 so far), the songs start at page 8; from Hype, if i preview one of the song pages directly, everything works fine, but if I preview the whole project, when I get to those pages the popup doesn’t pop… Unfortunately, the same happens when I export to html5.

If you want to take a look at my project, I’d be happy to send it to you in a PM.

thanks
Alex


(Alex D) #8

here are side by side code of working/not working:

50%20PM

18%20PM

Apparently, what makes it work is the definition of height and width to the inner div, if I add that manually, in firebug (or whatever it’s called now) then it works. So… how do we fix this?

P.S. I don’t have to preview at the beginning for it not to work, I can start on any page that is not linked to Wistia clips


(Alex D) #9

actually, here is the old file back, if you preview on first page, the videos on the second page won’t work. Did I just find a bug?..

wistia_embed wistia_Test_MV3.hype.zip (517.6 KB)


(Jonathan Deutsch) #10

My best guess as to what is happening is that the wistia code looks at the DOM to add event hooks on elements that match specific class names. It does this shortly after its javascript is loaded. As the second scene is not shown at this time, the hooks are not added to those elements, and thus nothing happens. If you preview from the second scene, then they would be added because they are there.

Most APIs have some way to refresh or manually add elements for dynamic situations like this. I glanced at their API and didn’t quite find anything like this, but i’d assume it exists. Maybe see if on their dev forums there’s a call that allows you to add/recognize dynamic DOM elements as something to play when clicked on?


(Alex D) #11

hi Jonathan,

I really can’t blame it on Wistia, I have the same project coded by hand as good old html, and there are no problems there… here is the corresponding page:
http://mcm1966.com/Lookbook/lookbook-7.html

Maybe Mark has some ideas?.. :slight_smile:


(Mark Hunte) #12

If you want to notify someone to look here, use an @ before their handle , otherwise it will be chance that they see you’re referring to them

i.e @aldan

I understand what @jonathan is saying and the behaviour of Hype is to not fully load the DOM on first ever scene load. Other scenes are only first fully loaded if they are current. (Hype is one page that holds all scenes so this may be one of the reasons for doing things this way. )

From memory when I helped last time, I think Jonathan is right.

And looking on their API page it even mentions that if a video display is set to none then it will not work.
Although the video on the scene may not be display none it is in effect if not loaded when the wisteria javascript runs.

I cannot find in the API of wistia a refresh function. But I do have some ideas.

So will report back on my findings…


(Mark Hunte) #13

Ok,

My first idea seems to work and is based on that we know that all Hype Scenes only fully load to the DOM when they become the current scene.

So the simply idea ( cough, cough ) is when the user clicks a next/previos page/scene button we reload hype to that page. Thus the Wistia API will kick in for the page/scene.

But we have to also allow ( if we want ) for the normal Hype browser reload behaviour, which is to reload the hype document from the beginning if the user clicks the browser reload button.

Working from my code on this thread

We can do that by jumping through some hoops.

Hoop 1, kind of, we will work backwards here so things make better sense .

1, Each next and previous nav button has been given a class name which indicates the name of the scene it navigates to.

2, The buttons all point to a single function. ( They do not directly run a load scene. )

The function sceneButtonClicked()

1, Will get the scene to navigate to using the class name.
2, It will set a browser session storage item with the name of scene to navigate to.
3, It will set a browser session storage item with a value to indicate the user clicked to navigate to a scene.
4, It will reload() the browser.

/*sceneButtonClicked*/

var scne =   element.classList[1] //-- EACH BUTTON HAS A CLASS NAME OF THE SCENE TO GO TO.
	 
window.currentSceneName = scne;

window.sessionStorage.setItem('currentScene',  window.currentSceneName); //-- SET BROWSER SESSION STOARGE WITH SCENE NAME

window.sessionStorage.setItem('buttonClicked',  "true"); //-- SET BROWSER SESSION STOARGE-  USER CLICKED NEXT SCENE BUTTON

location.reload(); //-- RELOAD HYPE 

In the Head file we have a function.

The function will run every time the browser loads/scene loads . i.e on a reload.

This function will check Browser the session storage items for buttonClicked value ( if used a nav button ) & currentSceneNamename ( The scene we want to nav)

Which if we clicked a nav button and reloaded should now be populated to ‘true’ and the scene name we want to go to.

If this reload was caused by the user clicking one of the buttons. ( buttonClicked = ‘true’ )

If user clicked a nav button then we can put the scene name from the session item into a global var. window.currentSceneName

We then check we are not already on that scene and nav to it if not. ( just a double check)

We the reset the buttonClicked to false.

If buttonClicked is false at any time the first scene will load. Hopefully insuring a normal reload or any other type of nav 's behaviour is normal.

 <script type="text/javascript"> 
 
 function myCallback(hypeDocument, element, event){ 

    
 //-- check if we have a session item for buttonClicked  
 
 
if(  window.sessionStorage.getItem('buttonClicked')) {
    
    
     //--if user last clicked a nav button is true
 
var buttonClicked =   window.sessionStorage.getItem("buttonClicked");
 
	 if ( buttonClicked  == 'true') {
	 
	 //-- we should have the scene stored we want to nav to from the last user click of a nav button
  window.currentSceneName =   window.sessionStorage.getItem("currentScene"); //string 
  
  //-- double check we are not on the same scene
 if (window.currentSceneName != hypeDocument.currentSceneName()) {
	
 //-- load the scene to nav to
	 hypeDocument.showSceneNamed(window.currentSceneName)
	 
	 }  
   
 } 
 
/* Reset the buttonClicked session item so we only load a nav scene if the user clicked a nav button.
 When buttonClicked is false we will assume the window/ scene  was reload by other means
 
 
 */
  window.sessionStorage.setItem('buttonClicked',  "false");
  
 } 
  } 

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}


window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":myCallback});
</script>

Example with 8 scenes.

reloadscene _ for wistia_MHv3.hype.zip (1.1 MB)


(Alex D) #14

@MarkHunte - you da man!!.. as they say on this side of the pond…


(Jonathan Deutsch) #15

Wow, nice job @MarkHunte, that is a very clever solution!


(Mark Hunte) #16

Cheers Mate.