Have you embedded a youtube video via iframe in your Webflow site and suddenly your page speed is super slow? Especially on mobile?

Worry no more, here’s how you can fix it.

Setup

Lets first look at the iframe you are embedding in Webflow

<iframe
  width="768"
  height="396"
  src="https://www.youtube.com/embed/QYAwFBGb-5U"
  rel="0"
  enablejsapi="1"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
></iframe>

Problem

The problem with this code is, that the video content of the iframe is loaded directly with the whole page. As the youtube video embed needs additional JavaScript resources, this leads to a slower page speed.

What you can do

You need to use a code snipped and adjust your iframe slightly. With this solution the iframe loads a blank page and then only fetches the Youtube Video, when the user clicks a link or a button.

New embed with an id and new properties.

<iframe
  id="embedVideo"
  width="768"
  height="396"
  data-src="https://www.youtube.com/embed/QYAwFBGb-5U"
  src="about:blank"
  rel="0"
  enablejsapi="1"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
></iframe>

jQuery Code Snippet you have to add. Your link or button must have the same id as the code snippet, in this case #start-video

<script>
  $(document).ready(function() {
     $("#start-video").click(function(){
      var iframe = $("#embedVideo");
      iframe.attr("src", iframe.data("src"));
     });
  });
  </script>