I created a custom header through Hype to add some uniqueness to a WordPress theme. I set the page to be 100% width and 100% height within Hype, exported the page, then uploaded it through FTP to the domain that has the WordPress plugin, here is the source page: http://wp.ideahubdesign.com/lightbulbs.html
Next, I embedded this full screen “hero” header into the homepage by added this iframe:
<iframe src="http://www.wp.ideahubdesign.com/lightbulbs.html" name="lightbulbs" scrolling="auto" frameborder="no" align="center" width= "100%" height = "100%">
The result can be found here: http://wp.ideahubdesign.com/test-3/
So this works as far as showing up, but for the life of me, I can’t get it to display as 100% viewport height. Even though the div in which it’s in is technically viewport height (as you can see by the light gray background), the iFrame height remains at around 200px in height.
I know 3/4 of the problem is related to WordPress, but I submitted a ticket to the developers at Qcode for their WordPress theme “Bridge” and they just said to replace the iFrame width/height with fixed PX values, which I thought was obvious that this was the opposite of what I was trying to do.
The Hype community has always been so helpful and provided brilliant solutions to push the envelope, so I thought I’d give this a shot.
-Jon
