@espinof <br>
<br>
<br>
<style>
    .video-responsive {
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
    }

    .video-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }




    /* responsywne wideo */
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        border: 5px solid grey;
        border-radius: 5px;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .video-wrap {
        width: 100%;
        max-width: 800px;
        /* margin: 0 auto; */
    }
</style>

<div class="video-wrap">
    <div class=" video-container">
        <!-- okno transmisji -->
        <div id="player"></div>


    </div>
    <!-- okno czatu -->
    <iframe width="400" height="608" style="border: 5px solid grey; border-radius: 5px;" src="https://www.youtube.com/live_chat?v=UvdyK9kpeKQ&embed_domain=mojbiznes.eu"></iframe>

</div>
<!-- ustawienia / konfiguracja youtybe -->
<script>
    // 2. Ten kod asynchronicznie ładuje kod interfejsu API odtwarzacza ramek IFrame.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. Ta funkcja tworzy <iframe> (i odtwarzacz YouTube)
    //    po pobraniu kodu API.
    /// 1080 / 608
    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            width: '560',
            height: '315',
            videoId: 'UvdyK9kpeKQ',
            playerVars: {

                'autohide': 0,
                'autoplay': 1,
                'controls': 1,
                'modestbranding': 1,
                'rel': 0,
                'playsinline': 0,
                'iv_load_policy': 3,

                'showinfo': 0,
                'disablekb': 0,
                'enablejsapi': 1,
                'widgetid': 0

            },
            events: {
                'onReady': onPlayerReady,
                'onPlaybackQualityChange': onPlayerPlaybackQualityChange
            }
        });
    }

    // 4. Interfejs API wywoła tę funkcję, gdy odtwarzacz wideo będzie gotowy.
    function onPlayerReady(event) {
        //event.target.setPlaybackQuality('hd1080');
        event.target.setVolume(100);
        event.target.playVideo();
    }

    function onPlayerPlaybackQualityChange(event) {
        var playbackQuality = event.target.getPlaybackQuality();
        var suggestedQuality = 'hd1080';

        console.log("Quality changed to: " + playbackQuality);

        if (playbackQuality !== 'hd1080') {
            console.log("Setting quality to " + suggestedQuality);
            event.target.setPlaybackQuality(suggestedQuality);
        }
    }

    // function onPlayerStateChange(event) {
    //     if (event.data == YT.PlayerState.PLAYING) {
    //         event.target.setPlaybackQuality('hd1080');
    //     }
    // }

    // function onPlayerStateChange(event) {
    //     if (event.data == YT.PlayerState.PLAYING) {
    //         event.target.setPlaybackQuality('hd720'); // <-- WORKS!
    //     }
    // }
</script>





<br>
<br>
<br>
<!-- TESTY -->

https://developers.google.com/youtube/iframe_api_reference?hl=pl
<br>
<div class="video-wrap">
    <div class=" video-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/UvdyK9kpeKQ?autohide=1&amp;rel=0&amp;autoplay=1&amp;playsinline=0&amp;iv_load_policy=3&amp;listType=user_uploads&amp;modestbranding=1&amp;controls=1&amp;showinfo=0&amp;disablekb=0&amp;enablejsapi=1&amp;widgetid=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>
<br>
<!-- 3
<iframe width="560" height="315" src="https://www.youtube.com/live_chat?v=UvdyK9kpeKQ&embed_domain=mojbiznes.eu"></iframe>

<br> -->
<!-- 
4
<iframe width="1080" height="609" src="https://www.youtube.com/embed/UvdyK9kpeKQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> -->

<br>
<br>
<br>
<div id="WidgetContainer"></div>

<script type="text/javascript">
    var _options = {
        '_license_key': '621-763-700',
        '_role_token': '',
        '_registrant_token': '',
        '_personal_token': '',
        '_presenter_token': '',
        '_password_token': '',
        '_widget_containerID': 'WidgetContainer',
        '_widget_width': '100%',
        '_widget_height': '100vh',
        '_email': '',
        '_nickname': '',
        '_avatar_url': '',
    };
    (function() {
        ! function(i) {
            i.Widget = function(c) {
                    'function' == typeof c && i.Widget.__cbs.push(c),
                        i.Widget.initialized && (i.Widget.__cbs.forEach(function(i) {
                                i()
                            }),
                            i.Widget.__cbs = [])
                },
                i.Widget.__cbs = []
        }(window);
        var ab = document.createElement('script');
        ab.type = 'text/javascript';
        ab.async = true;
        ab.src = 'https://embed.livewebinar.com/em?t=' + _options['_license_key'] + '&' + Object.keys(_options).reduce(function(a, k) {
            a.push(k + '=' + encodeURIComponent(_options[k]));
            return a
        }, []).join('&');
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ab, s);
    })();
</script>