How to play youtube video full width on going issue / mobile and responsive

Solution One is :

Colorsection with code-block element in it ( all checkmarks not enabled )
Content of the codeblock is

<div class="responsive-container">
	<iframe class="responsive-iframe" src="https://www.youtube.com/embed/5kTP_6qW6IU?enablejsapi=1&loop=1&autoplay=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

( the ecver=2 is new to youtube videos – it restrains the related videos on pause – it is similar to rel=0 which hampers the related videos on the end)

this to quick css (very similar to enfold lightbox settings

.responsive-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25vw;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 56.25vw;
    border: 0;
}

.responsive .page-id-31239 #av_section_1 .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0;
}

________________

Solution Two:
Videoscreenshot Image with custom link:

https://www.youtube.com/watch?v=5kTP_6qW6IU?enablejsapi=1&autoplay=1&loop=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3&iframe=true

To have nearly maximum lightbox size – this to quick css:
(i only set it for that page – you have to alter that)

.page-id-31341 .mfp-container {
	text-align: inherit;
	position: absolute;
	width: 98vw;
	height: 55.125vw;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 50px;
}

.page-id-31341 .mfp-iframe-holder .mfp-content {
    max-width: 100%;
    width: 100%
}

.page-id-31341 div.avia-popup .mfp-close {
    right: 5px;
    top: 5px !important;
    background: #900;
    border: 2px solid #ffee00;
}

so get rid of the autoplay=1

<div class="responsive-container">
	<iframe class="responsive-iframe" src="https://www.youtube.com/embed/5kTP_6qW6IU?enablejsapi=1&loop=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

btw. you can setup all css inline via functions.php of your child theme – then you can erase the quick css entries:

function set_container_for_responsive_youtubevideo(){
?>
<script>
(function($){
	$('.responsive-container').css({
		"position": "relative", 
		"overflow": "hidden" , 
		"padding-top": "56.25vw"
	});
	$('.responsive-iframe').css({
		"position": "absolute", 
		"top": "0" , 
		"left": "0", 
		"width": "100vw" ,
		"height": "56.25vw" ,
		"border": "0"
	});
	$('.responsive-container').closest('.container').css({
		"max-width": "100%", 
		"width": "100%" , 
		"padding": "0px"
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'set_container_for_responsive_youtubevideo');

you can see here on another test-page that the right css goes to the concerning section – if code-block looks like: https://webers-testseite.de/new-test-with-youtube-video/

<div class="responsive-container">
	<iframe class="responsive-iframe" src="https://www.youtube.com/embed/5kTP_6qW6IU?enablejsapi=1&loop=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

dear mods – i do not know why the iframe works on this now – the only difference is that here in the iframe surrounded by some divs in the code-block element. Or are there some fixes in the meanwhile since my last posting concerning to this iframe issue ( january 18 )