All Collections
Sharing and Embedding
Embedding Responsively or Fluidly
Embedding Responsively or Fluidly
Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

To ensure your HapYak Project is responsive:

  1. After selecting a Share Type for a video, 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.

Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.

Did this answer your question?