Html Question posted in
Some basic documentation can be found here.

Html – SVG overlay on background video CSS

enter image description here
Im having trouble having a svg overlay take up 100% width, but modifying the height so it aligns where i need it to so the curve is visible over the video see screenshot. What is the best way to overlay a SVG to make it align and display properly, Thanks.

* {
  font-family: "Montserrat";
}

.video-section {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: -1;
  margin: 0;
  /* Ensure no margin */
  padding: 0;
  /* Ensure no padding */
}

.vimeo-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.vimeo-wrapper iframe {
  width: 100vw;
  height: 56.25vw;
  /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh;
  /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-overlay {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2 !important;
  font-size: 48px;
  color: #fcfdfd;
  font-weight: bold;
  line-height: 1;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  z-index: 1 !important;
  opacity: 22% !important;
}

.text-section {
  margin-top: -200px;
  padding: 20px;
  text-align: center;
}

.text-content {
  max-width: 800px;
  margin: 0 auto;
  font-weight: 600;
}

.text-content p {
  font-size: 48px;
  letter-spacing: -2px;
  line-height: 50pt;
  color: #020202;
}

.learn-more-btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 30px 0 45px;
  border-radius: 50px;
  background-color: #f7cd46;
  color: black;
  text-decoration: none;
}

.svg-overlay {
  position: absolute;
  top: 173px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  object-fit: cover;
}

.svg-overlay svg {
  width: 100%;
  height: 100%;
}

.services {
  font-family: "Montserrat";
  margin-top: 20px;
  font-size: 28px;
  font-weight: 600;
  color: rgb(252, 253, 253);
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.down-arrow {
  margin-top: 20px;
  width: 50px;
  height: auto;
  display: inline-block;
}


/* Media Queries for Mobile Optimization */

@media (max-width: 1200px) {
  .text-overlay {
    font-size: 40px !important;
  }
  .text-content p {
    font-size: 40px !important;
  }
  .services {
    font-size: 24px !important;
  }
  .svg-overlay {
    top: 160px;
  }
}

@media (max-width: 992px) {
  .text-overlay {
    font-size: 36px !important;
  }
  .text-content p {
    font-size: 36px !important;
  }
  .services {
    font-size: 22px !important;
  }
  .svg-overlay {
    top: 140px;
  }
}

@media (max-width: 768px) {
  .text-overlay {
    font-size: 32px !important;
  }
  .text-content p {
    font-size: 32px !important;
  }
  .services {
    font-size: 20px !important;
  }
  .svg-overlay {
    top: 120px;
  }
}

@media (max-width: 576px) {
  .text-overlay {
    font-size: 28px;
  }
  .text-content p {
    font-size: 28px;
  }
  .services {
    font-size: 18px;
  }
  .svg-overlay {
    top: 100px;
  }
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<section class="video-section">
  <div class="svg-overlay">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1900" preserveAspectRatio="none">
      <path
        d="M 0 64.159 L 0 128.317 6.250 122.384 C 43.706 86.827, 103.466 43.808, 162 10.266 C 171.075 5.066, 178.688 0.629, 178.917 0.406 C 179.146 0.183, 138.983 0, 89.667 0 L 0 0 0 64.159 M 1825.083 0.406 C 1825.313 0.629, 1832.925 5.066, 1842 10.266 C 1898.402 42.587, 1949.025 78.621, 1991.750 116.862 L 2000 124.246 2000 62.123 L 2000 0 1912.333 0 C 1864.117 0, 1824.854 0.183, 1825.083 0.406 M -0 1353.282 L -0 1944.001 1000.250 1943.750 L 2000.500 1943.500 2000.601 1352.500 C 2000.656 1027.450, 2000.514 762.735, 2000.285 764.244 C 1999.245 771.098, 1941.602 817.213, 1897.711 846.306 C 1705.220 973.894, 1431.636 1055.271, 1134 1073.470 C 1085.850 1076.415, 1056.710 1077.249, 1002 1077.249 C 947.290 1077.249, 918.150 1076.415, 870 1073.470 C 572.426 1055.275, 298.778 973.891, 106.383 846.368 C 69.328 821.807, 28.086 789.742, 5.750 768.127 L -0 762.563 -0 1353.282 M 0.497 1353.500 C 0.497 1678.550, 0.611 1811.376, 0.750 1648.668 C 0.889 1485.960, 0.889 1220.010, 0.750 1057.668 C 0.611 895.326, 0.497 1028.450, 0.497 1353.500"
        stroke="none" fill="#fffcfc" fill-rule="evenodd" />
    </svg>
  </div>
  <div class="vimeo-wrapper">
    <iframe src="https://player.vimeo.com/video/1008961063?background=1&autoplay=1&loop=1&byline=0&title=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <div class="video-overlay"></div>
    <div class="text-overlay">
      <h1>
        <span>Creativity for</span>
        <span>the complete</span>
        <span>brand</span>
        <span>experience.</span>
      </h1>
      <div class="services">
        Advertising | Branding | Digital | Social | Events
      </div>
      <div class="down-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#FFF">
          <path
            d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
        </svg>
      </div>
    </div>
  </div>
</section>

<section class="text-section">
  <div class="text-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehen.</p>
    <a href="#" class="learn-more-btn">Learn More</a>
  </div>
</section>

I tried setting width: 100% & height: 200% on .svg-overlay aswell as preserveAspectRatio="none" attribute on the SVG

Tags:

2

Answers


  1. 0

    Your svg might have its own height and width that you should delete before adding any styles. That should fix your issue.

    Login or Signup to reply.
  2. 0

    Use the CSS mask property to mask the video. It is the most flexible way to mask an HTML element using a SVG.

    I suggest that you use CSS grid layout instead of the position property. If you place elements in the same grid position they will overlap.

    body {
  margin: 0;
  /* Ensure no margin */
  padding: 0;
  /* Ensure no padding */
}

* {
  font-family: "Montserrat";
}

.video-section {
  display: grid;
  grid-template-rows: auto 4em;
  height: 100vh;
  mask-image: url('data:image/svg+xml,<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 534"><path d="M 0 0 v 500 a 30 10 0 0 0 200 0 v -500 z" fill="orange" /></svg>');
  mask-repeat: no-repeat;
  mask-size: 120%;
  mask-position: bottom center;
  background-color: rgb(0, 0, 0);
}

.vimeo-wrapper {
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  grid-column: 1;
  grid-row: 1 / span 2;
  opacity: 44% !important;
  display: flex;
  justify-content: center;
}

.vimeo-wrapper iframe {
  min-height: 100%;
  aspect-ratio: 16 / 9;
}

.text-overlay {
  grid-column: 1;
  grid-row: 1;
  text-align: center;
  font-size: 48px;
  color: #fcfdfd;
  font-weight: bold;
  line-height: 1;
}

.text-overlay h1 {
  display: flex;
  flex-direction: column;
}

.down-arrow {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  padding-bottom: 1em;
}

.text-section {
  padding: 20px;
  text-align: center;
}

.text-content {
  max-width: 800px;
  margin: 0 auto;
  font-weight: 600;
}

.text-content p {
  font-size: 48px;
  letter-spacing: -2px;
  line-height: 50pt;
  color: #020202;
}

.learn-more-btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 30px 0 45px;
  border-radius: 50px;
  background-color: #f7cd46;
  color: black;
  text-decoration: none;
}

.services {
  font-family: "Montserrat";
  margin-top: 20px;
  font-size: 28px;
  font-weight: 600;
  color: rgb(252, 253, 253);
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}


/* Media Queries for Mobile Optimization */

@media (max-width: 1200px) {
  .text-overlay {
    font-size: 40px !important;
  }
  .text-content p {
    font-size: 40px !important;
  }
  .services {
    font-size: 24px !important;
  }
  .svg-overlay {
    top: 160px;
  }
}

@media (max-width: 992px) {
  .text-overlay {
    font-size: 36px !important;
  }
  .text-content p {
    font-size: 36px !important;
  }
  .services {
    font-size: 22px !important;
  }
  .svg-overlay {
    top: 140px;
  }
}

@media (max-width: 768px) {
  .text-overlay {
    font-size: 32px !important;
  }
  .text-content p {
    font-size: 32px !important;
  }
  .services {
    font-size: 20px !important;
  }
  .svg-overlay {
    top: 120px;
  }
}

@media (max-width: 576px) {
  .text-overlay {
    font-size: 28px;
  }
  .text-content p {
    font-size: 28px;
  }
  .services {
    font-size: 18px;
  }
  .svg-overlay {
    top: 100px;
  }
}
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<section class="video-section">
  <div class="vimeo-wrapper">
    <iframe src="https://player.vimeo.com/video/1008961063?background=1&autoplay=0&loop=1&byline=0&title=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
  <div class="text-overlay">
    <h1>
      <span>Creativity for</span>
      <span>the complete</span>
      <span>brand</span>
      <span>experience.</span>
    </h1>
    <div class="services">
      Advertising | Branding | Digital | Social | Events
    </div>
  </div>
  <div class="down-arrow">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#FFF">
      <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
    </svg>
  </div>
</section>

<section class="text-section">
  <div class="text-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehen.</p>
    <a href="#" class="learn-more-btn">Learn More</a>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search