Sometimes, instead of a fixed-width embed you want to embed your video so it behaves responsively or fluidly.

To ensure your HapYak project is embedded responsively you need to:

  1. Ensure the video source is responsive by checking responsive in the embed dialogue.
  2. Place the embed code inside a container on the destination that is itself responsive.

The general principles of fluid and responsive video are well laid out here.

A good start is to copy the HapYak player embed code, go to embedresponsively.com (Generic iFrame tab) and paste it there. It does steps 2 for you by adding the container directly to the HTML.

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.

Did this answer your question?