Jak osadzić film z Youtube na stronie internetowej webflow

Oryginalny kod pochodzi ze strony: labnol.org

Poniżej wersja kodu z moimi modyfikacjami, kod wklejamy do Webflow korzystając z modułu embed html.

Pamiętajcie, aby w kodzie podłączyć zmienną z bazy danych odpowiadającą ID filmu z Youtube - sekcja Data ID - dokładne info jak to zrobić znajdziecie w filmie poniżej około 6 minuty

<style></style>
   .youtube-player {
       position: relative;
       padding-bottom: 56.23%;
       height: 0;
       overflow: hidden;
       max-width: 100%;
       background: #000;
       margin: 5px;
   }

   .youtube-player iframe,
   .youtube-player object,
   .youtube-player embed {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 100;
       background: transparent;
   }

   .youtube-player img {
       bottom: 0;
       display: block;
       left: 0;
       margin: auto;
       max-width: 103%;
       width: 103%;
       position: absolute;
       right: 0;
       top: 0;
       border: 0;
       height: auto;
       cursor: pointer;
       -webkit-transition: .4s all;
       -moz-transition: .4s all;
       transition: .4s all;

   }

   .youtube-player img:hover {
       -webkit-filter: brightness(75%);
   }

   .youtube-player .play {
       height: 100px;
       width: 100px;
       left: 50%;
       top: 50%;
       margin-left: -36px;
       position: absolute;
       background: url("//uploads-ssl.webflow.com/5ee72ee918269a824d408a0d/5ee8b4f6d24de515333814ce_play.svg") no-repeat;
       cursor: pointer;
   }

<div class="youtube-player" data-id="{{wf {&quot;path&quot;:&quot;video-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"></div>

<script></script>

   document.addEventListener("DOMContentLoaded",
       function() {
           var div, n,
               v = document.getElementsByClassName("youtube-player");
           for (n = 0; n < v.length; n++) {
               div = document.createElement("div");
               div.setAttribute("data-id", v[n].dataset.id);
               div.innerHTML = labnolThumb(v[n].dataset.id);
               div.onclick = labnolIframe;
               v[n].appendChild(div);
           }
       });

   function labnolThumb(id) {
       var thumb = '<img src="https://i.ytimg.com/vi/ID/maxresdefault.jpg">',
           play = '<div class="play"></div>';
       return thumb.replace("ID", id) + play;
   }

   function labnolIframe() {
       var iframe = document.createElement("iframe");
       iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
       iframe.setAttribute("frameborder", "1");
       iframe.setAttribute("allowfullscreen", "1");
       this.parentNode.replaceChild(iframe, this);
   }

‍