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
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;"> </div>
Here’s a quick demo:
demo.zip (63.2 KB)
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)
I guess that was a hard question…
1 Like
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)
2 Likes
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
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
here are side by side code of working/not working:
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
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)
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?
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?.. 
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…
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.
4 Likes
Cheers Mate.