Wordpress Plugin Embed: Troubleshooting Responsive Document

I am getting frustrated trying to get my animation to resize responsively according to the width of the containing element - as it does when you preview in different screens and you use the native html. That is the exact thing I want to happen within the embed, so it’s got to be possible.
I hadn’t seen this plugin and I thought it was going to do what I needed (I wasted a load of time on this yesterday). I am doing a fairly long sequence of slides for a training course. I don’t need to do portrait style layouts for mobiles - if it goes too small to read they can rotate their phone - it’s fine. It fits nicely like that and is legible.

I can’t get the settings to work right. Help please - this should be a simple thing to do. I thought that was what the plugin would facilitate. It seems to come up over and over again in the forums - can you point me in the right direction.

If you want to see the url can I send it privately please. Thanks for the help.

How are you embedding the Hype Project? Are you using the iFrame method?

I am using the embed method I can try the iframe though

Neither works for me div or iframe :frowning: I’ve tried all sorts of javascript I found on the forum - but I can’t seem to get it to work.

Well, I tend to do one basic trick to make my Hype projects work at different screen sizes… no JavaScript necessary. I chuck all of the elements in a group. I pin the edges of that group to the edges of the scene, then I just scale the contents.

Examples… https://photics.com/games/circles-with-grandma/ (mentioned above) …and… https://photics.com/free-template-tuesday-2-tumult-hype-looking/ (downloadable template)

This method may have performance issues, so check your CPU usage. If you have big scrolling backgrounds, that might not work well with this method.

I’m not using the plugin though. I prefer FTP and HTML / iFrame.

Since you're embedding with a 'post area' within your Wordpress theme, you're really at the whims of how your Wordpress theme handles responsiveness. When exporting straight from Hype, you're getting a Hype-generated HTML page with access to the full viewport width, and the entirety of the HTML body -- no footers, headers, or percentage-based widths governed by your theme.

If you are able to create a blank Page or Post template without the responsive trappings of your theme and embed in that, this will give you a more direct representation of what your Hype document would do when previewed directly from Hype. Here's a template you can use, plucked from the HTML5 Blank Wordpress theme and slightly modified:

All this does is display the title and post within standard HTML. It also includes the default CSS reset used in Hype responsive documents to ensure the Body and HTML tags are sized correctly.

I actually tried that route yesterday and had slightly more success than I was having with your plugin. Only I saw that there was a plugin last night and assumed that it would fit the animation into a wordpress post / page context and solve the issue that me and lots of people seem to have. I’ll look again at it and see can I get it to run - but any embed seemed to effect the hype document’s responsivity.

Hi Daniel - I have stripped the page template of everything and I still get the same behaviour.

Look at -deleted the links same hype document but the html file behaves nicely in a mobile and the one in the wordpress site behaves badly.

I am at a loss.

Are you sure this is a problem with the plugin? I visited both links and both look like they had problems with responsiveness. I couldn't get it to work. (Safari / Developer Tools / Responsive Design Mode)

When I visit the html link in my iphone it sizes to fit the screen and I can see the whole thing. but in the wordpress page it shoots off the side.

I checked on android too and the html file url version sizes to the width of the viewport but it doesn’t in the wordpress embed. That’s the behaviour I want - that it is a maximum of 1000pixels and if it’s a smaller viewport / container in the wordpress context everything just gets smaller like hype does natively.

That's very strange. I loaded up the iOS simulator (heh, because I don't feel like getting my phone) and I was able to confirm the difference. On the second link, while not a perfect layout (portrait), it does have signs of responsiveness. However, if I load up the page in my desktop browser and set the width to an iOS size, nothing happens. That doesn't make any sense to me.

Theoretically, a Hype project should resize gracefully. That's why I'm still thinking something is wrong with the Hype project. With the iFrame mode for the WordPress plugin, the Hype project should just resize.

This is because in the pure Hype HTML this is being set:

<meta name="viewport" content="user-scalable=yes, width=1000" />

Which sets the viewport width to be the width of your Hype document, 1000 pixels.

The viewport setting in your Wordpress site is:

<meta name="viewport" content="width=device-width, initial-scale=.7, maximum-scale=1">

So it’s getting your device width, the scaling it down to .7.

If you add this in your page template (anywhere below the current viewport settings) it should at least set the viewport settings to be the same, but I’m not sure all the other considerations of your WP theme:

<meta name="viewport" content="user-scalable=yes, width=1000" />

2 Likes

Thank you thank you thank you - that’s the result of a javascript thing I tried yesterday… It’s scaling now looks a mess of a page but the important bit is in - If I could give you a hug I would.
Been doing my head in! I want to just get the lessons done out.

1 Like