JSFiddle - React, Tailwind, and code Playground

by Allen N.

HTML

<section class="video-w-gradient">
  <div class="left-column">
    <div class="quote-container">
      Look deep into nature, and then you will understand everything better.
      <br /><br />
      ~ Albert Einstein
    </div>
  </div>
  <div class="right-column">
    <iframe
      id="ytplayer"
      type="text/html"
      width="720" height="540"
      src="https://www.youtube.com/embed/z3U0udLH974?autoplay=1&mute=1&controls=0&fs=0&loop=1"
      frameborder="0"
    >
    </iframe>
  </div>
</section>

CSS

/* jsfiddle overrides */
body {
  margin: 0;
  padding: 0;
}

#console{
  position: absolute;
  bottom: 0;
}

/* ------------------------------------------------ */


/* Set the root variables */
.video-w-gradient {
  --gradient-width: 600px;
  --video-width: 720px;
  --video-height: 540px;
  --video-height-mobile: 200px;
  --gradient-color: palegoldenrod;
  --gradient-color-rgb: 238, 232, 170;
}

/* https://red-route.org/code/image-resizing-calculator */
@media not all and (min-width: 1536px) {
  .video-w-gradient {
    --video-width: 630px; /* 87.5 % of original */
    --video-height: 470px;
  }
}
@media not all and (min-width: 1280px) {
  .video-w-gradient {
    --video-width: 540px; /* 75 % of original */
    --video-height: 405px;
  }
}
@media not all and (min-width: 1024px) {
  .video-w-gradient {
    --video-width: 360px; /* 50 % of original */
    --video-height: 270px;
  }
}

/* https://red-route.org/code/image-resizing-calculator */
@media not all and (min-width: 768px) { /* Mobile View */
  .video-w-gradient {
    --video-width: 767px;
    --video-height: 575px;
  }
}

/* Define the flex container */
.video-w-gradient {
  display: flex;
  flex-direction: row;
  position: relative; /* for pseudo element positioning */
  overflow: hidden;
}

@media not all and (min-width: 768px) {
  .video-w-gradient {
    flex-direction: column;
  }
}

.video-w-gradient::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://allenski.com/images/noisy-texture-90x90.png);
  height: 100%;
  width: 100%;
  opacity: 0.3;
}

/* Style the left column */
.left-column {
  box-sizing: border-box;
  width: calc(100vw - var(--video-width)); /* two-thirds of viewport width minus gradient width  */
  background-color: var(--gradient-color); /* adjust to your liking */
  padding: 20px;
}

@media not all and (min-width: 768px) {
  .left-column {
    padding: 3rem 2rem;
    width: 100vw;
  }
}

/* Style the right column (video) */
.right-column...