If you're a blogger or web site author looking to make your site friendlier for mobile viewers, you might want to make your embedded Haiku Deck responsive. This way the embedded playback player will change size based on the screen size of the person viewing it.
This can be done by making a small change to the embed code that you get from the app.
As an example, a normal embed code looks like this:
Original Embed Code:
<iframe src="https://www.haikudeck.com/e/7d585eb221/?isUrlHashEnabled=false&isPreviewEnabled=false&isHeaderVisible=false" width="640" height="541" frameborder="0" marginheight="0" marginwidth="0"></iframe><br/><span style="font-family: arial, sans-serif; font-size: 8pt;"><a title="10 ways to use Presentation Videos" href="https://www.haikudeck.com/p/7d585eb221">10 ways to use Presentation Videos</a> - Created with Haiku Deck, presentation software that inspires</span>;
To make this code responsive, change the width and height parameters to reflect the percentage of the viewport you wish your deck to occupy. In the revised embed code below, we've chosen 98% for height and 73% for width. As long as these numbers are in a 4:3 ratio, you can make them whatever you want.
New Responsive Embed Code:
<iframe src="https://www.haikudeck.com/e/7d585eb221/?isUrlHashEnabled=false&isPreviewEnabled=false&isHeaderVisible=false" width="98vw" height="73vw" frameborder="0" marginheight="0" marginwidth="0"></iframe><br/><span style="font-family: arial, sans-serif; font-size: 8pt;"><a title="10 ways to use Presentation Videos" href="https://www.haikudeck.com/p/7d585eb221">10 ways to use Presentation Videos</a> - Created with Haiku Deck, presentation software that inspires</span>;
0 Comments