Making the HapYak Wrapper Responsive

To ensure your project is responsive:

1. After selecting a Share Type of HapYak Wrapper, check Responsive in the embed dialogue (read more about Options / Size here).
2. Place the embed code inside a container on the destination that is itself responsive.

This second step is occasionally the tricky part. Most modern CMSs automatically ensure this. If yours does not or you have a custom coded website or CMS then here are a few resources that should help...

1. Review the general principles of fluid and responsive video here.
2. Copy the HapYak player embed code, go to embedresponsively.com (Generic iFrame tab) and paste it there. It does step 2 for you by adding the container directly to the HTML.
3. Alternatively you can create classes in CSS for the responsive container. Here's an example:

.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 40px; height: 0; overflow: hidden; }

.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

and reference those classes in the div into which the video is embedded:

<div class="responsive-container">
        

<iframe class="hapyak-embed" marginwidth="0" marginheight="0" frameborder="no" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" src="//www.hapyak.com/embed?key=9d2be3d5dfde4a849490&amp;project=6876" width="100%" height="100%">


</div>
      

You can see a sample page with this all applied here.