Make Video Embeds Responsive

The following codes can be added into a Custom HTML (Hypertext Markup Language) Widget when embedding a video to make the videos more responsive for mobile and smaller screen widths:

<style>
  .iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
  }


  .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="iframe-container">
  <iframe
    width="560"
    height="315"
    src="INSERT YOUTUBE URL"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen=""
  ></iframe>
</div>

For basic responsiveness with a max width, use this code:

<style>
  .youtube-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 560px;
  }
</style>


<iframe
  class="youtube-video"
  width="560"
  height="315"
  src="INSERT YOUTUBE URL"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen=""
></iframe>