Avoiding Layout Shift

The embedded recording client requires external resources in order to apply the required styling, specifically, pipe.css. Until those resources are fetched, the recording client has a height of 0px, leading to a sudden change in height (layout shift) after the styling is applied. This shift can be disruptive for users because it changes the positioning of the elements on the page abruptly.

By implementing the following suggestions when embedding the Pipe recorder, layout shift can be avoided entirely.

Implementation Suggestions #

In order to avoid layout shift, the following changes can be made to the 2.0 HTML and JavaScript embed code:

• A <div> element can be added inside the <piperecorder> tag for the HTML embed code, or inside the original parent <div> tag for the JavaScript embed code. The newly added <div> element should have the following styling:
  • width: 640px; and height: 390px; to set a specific size for the element. This helps keep it consistent before and after the actual styling (pipe.css) is applied and prevents unexpected size changes.
  • border: 1px solid grey; to add a thin grey border. While not preventing layout shifts directly, it creates a clear visual boundary.
  • text-align: center; to center any text inside the element horizontally in order to display a loading message right in the center.
  • border-radius: 8px; to round the corners of the element in order to match the recording client’s corners after all the resources are loaded and applied.
• A <span> element inside the above mentioned new <div> element that will contain a loading text with the following properties:
  • style="line-height: 180px;" to create extra space both above and below the text, resulting in a vertically centered appearance with more space at the bottom.
  • Loading... will be the actual text content displayed informing that the recording client is not yet fully loaded.

HTML #

Here is an example of how to implement the suggestions inside the HTML 2.0 embed code:

<piperecorder id="custom-id" pipe-width="640" pipe-height="390" pipe-qualityurl="avq/360p.xml" pipe-accounthash="132" pipe-eid="132" pipe-mrt="600" pipe-avrec="1">
  <div style="width:640px;height:390px;border:1px solid grey;text-align:center;border-radius:8px;">
    <span style="line-height:180px">Loading...</span>
  </div>
</piperecorder>

JavaScript #

Here is an example of how to implement the suggestions inside the JavaScript 2.0 embed code:

<div id="custom-id">
  <div style="width:640px;height:390px;border:1px solid grey;text-align:center;border-radius:8px;">
    <span style="line-height:180px">Loading...</span>
  </div>
</div>
<script type="text/javascript">
  var pipeParams = {
    size: {width: 640, height: 390},
    qualityurl: "avq/360p.xml",
    accountHash: "123",
    eid: "123",
    mrt: 600,
    avrec: 1
  };
  PipeSDK.insert("custom-id", pipeParams, function(recorderObject){});
</script>

Benefits #

• Enhanced User Experience: Preventing layout shifts ensures that users have a smoother, more predictable interaction with your website/platform.
• Improved SEO Performance: Google considers page speed and user experience as factors for search rankings. By minimizing layout shifts, you enhance the performance of your website, potentially leading to better search engine rankings.