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)