FluentPress Blocks

Podgląd – Odtwarzacz
Tak będzie wyglądał Twój odtwarzacz. Pamiętaj o załączeniu skryptów Plyr.js na stronie docelowej.
Wygenerowany HTML Odtwarzacza
<div id="plyr-container-0x41vh8" class="fc-player-wrapper" style="display: flex; gap: 24px; flex-direction: column-reverse; max-width:800px; margin: 0 auto; align-items: flex-start;">
        <div style="flex: 3; min-width: 0; width: 100%;"><div style="max-width:100%; --plyr-color-main: #1E3A8A; --plyr-control-spacing: 15px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.10); overflow:hidden;"><div class="plyr"  data-plyr-config='{&quot;poster&quot;:&quot;https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg&quot;,&quot;autoplay&quot;:false,&quot;autopause&quot;:true,&quot;seekTime&quot;:10,&quot;volume&quot;:1,&quot;muted&quot;:false,&quot;clickToPlay&quot;:true,&quot;disableContextMenu&quot;:true,&quot;hideControls&quot;:true,&quot;resetOnEnd&quot;:false,&quot;invertTime&quot;:true,&quot;loop&quot;:{&quot;active&quot;:false},&quot;controls&quot;:[&quot;play-large&quot;,&quot;play&quot;,&quot;progress&quot;,&quot;current-time&quot;,&quot;mute&quot;,&quot;volume&quot;,&quot;captions&quot;,&quot;settings&quot;,&quot;pip&quot;,&quot;fullscreen&quot;],&quot;settings&quot;:[&quot;captions&quot;,&quot;quality&quot;,&quot;speed&quot;,&quot;loop&quot;],&quot;speed&quot;:{&quot;selected&quot;:1,&quot;options&quot;:[0.5,0.75,1,1.25,1.5,1.75,2]},&quot;quality&quot;:{&quot;default&quot;:576,&quot;options&quot;:[4320,2880,2160,1440,1080,720,576,480,360,240]},&quot;markersEnabled&quot;:false,&quot;markers&quot;:{&quot;enabled&quot;:false,&quot;points&quot;:[]},&quot;showMarkersList&quot;:false,&quot;markersListTitle&quot;:&quot;Spis treści&quot;,&quot;markersListPosition&quot;:&quot;bottom&quot;,&quot;youtube&quot;:{&quot;noCookie&quot;:true,&quot;rel&quot;:0,&quot;showinfo&quot;:0,&quot;iv_load_policy&quot;:3,&quot;modestbranding&quot;:1},&quot;tooltips&quot;:{&quot;controls&quot;:true,&quot;seek&quot;:true},&quot;urls&quot;:{&quot;download&quot;:null}}' data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div></div></div>
    </div>
    <style>
      #plyr-container-0x41vh8 .plyr__control--overlaid { 
        aspect-ratio: 1 / 1; 
        background-color: rgba(30, 58, 138, 0.5);
      }
      #plyr-container-0x41vh8 .plyr__control--overlaid:hover { 
        background-color: rgba(30, 58, 138, 0.75);
      }
      #plyr-container-0x41vh8 .plyr__control--overlaid svg {
        left: 51%;
        position: relative;
        transform: translateX(-50%);
      }
    </style>
Źródło

Opcje odtwarzania (Plyr)

Markery / Rozdziały

Styl
