<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>


<a href="https://youtu.be/dB3wBb5e58w?si=iRXbY1tHSu-T8pXx" class="video-btn" data-fancybox>
  Открыть видео
</a>

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-decoration: none;
}

body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.video-btn {
  display: flex;
  color: white;
  padding: 24px 32px;
  font-weight: 600;
  background-color: #2d72d9;
  border-radius: 6px;
}

Fancybox.bind("[data-fancybox]", {
  Html: {
    iframeAttr : {
      allow: "fullscreen"
    },
    youtube: {
      autoplay: 0
    } 
  }
});