JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Place in "Custom HTML/JS element -->
<img width="560" height="315" src="https://images.clickfunnels.com/dd/925fd09eef11e8bf332735ed56cdba/5.jpg" frameborder="0" allowfullscreen>
<!-- This needs to go in Tracking Code Footer section -->
<script>
$( document ).ready(function() {
var vidWidth = $('#VIDEO-ROW-ID iframe').width();
var vidHeight = $('#VIDEO-ROW-ID iframe').height();
var rowWidth = $('#VIDEO-ROW-ID').width();
var sectionHeight = $('#VIDEO-SECTION-ID').outerHeight();
var newVidHeight = (vidHeight * rowWidth) / vidWidth;
var vidOffset = ((newVidHeight - sectionHeight) / 2) * -1;
$('#VIDEO-ROW-ID iframe').width(rowWidth).height(newVidHeight);
$('#VIDEO-ROW-ID iframe').css('top', vidOffset);
});
</script>
CSS
/* ----------- ClickFunnels YouTube Video BG ----------- */
/* ------------------ By Matt Hopkins ------------------ */
/* --- © 2017 ZAGG Studios, Ltd. All rights reserved --- */
#VIDEO-SECTION-ID .containerInner {
width: 100% !important;
min-height: 100vh !important;
overflow: hidden;
position: relative;
}
#VIDEO-SECTION-ID #VIDEO-ROW-ID .innerContent {
padding: 0 !important;
}
#VIDEO-SECTION-ID #VIDEO-ROW-ID .innerContent .col-inner {
padding: 0 !important;
}
#VIDEO-SECTION-ID #VIDEO-ROW-ID iframe {
position: absolute;
margin: 0;
padding: 0;
}
#CONTENT-ROW-ID {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}