响应式YouTube嵌入文本定位问题求助（CSS/HTML新手）

Hey there! Great job getting the responsive YouTube embed working already—let's tackle the text positioning issues you're facing. Here's a straightforward solution that'll keep your text on top of the video and maintain its relative position across all screen sizes:

Step 1: Structure Your HTML with a Container #

First, wrap both your YouTube iframe and your text inside a parent container. This gives us a "positioning context" so the text can stay relative to the video no matter how the screen resizes.

<div class="video-container">
  <!-- Your responsive YouTube iframe -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  
  <!-- Your overlay text -->
  <div class="video-overlay-text">Your overlay text here!</div>
</div>

Step 2: Add CSS for Positioning & Stacking Order #

Now we'll style the container, video, and text to get the desired effect:

/* Parent container: creates positioning context for child elements */
.video-container {
  position: relative;
  width: 100%;
  max-width: 800px; /* Adjust max width as needed */
  margin: 0 auto; /* Centers the container */
  aspect-ratio: 16/9; /* Maintains YouTube's 16:9 aspect ratio for responsiveness */
}

/* Responsive YouTube iframe */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Lower z-index so text sits on top */
}

/* Overlay text */
.video-overlay-text {
  position: absolute;
  z-index: 2; /* Higher z-index than the iframe to sit on top */
  
  /* Adjust these values to set your desired position */
  top: 10%; /* 10% from the top of the video container */
  left: 10%; /* 10% from the left of the video container */
  
  /* Optional styling for readability */
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

Key Notes to Maintain Consistent Positioning: #

• Use percentage values for top, left, right, or bottom instead of fixed pixels. This ensures the text stays in the same relative position (e.g., 10% from the top-left) no matter how the video container resizes.
• position: relative on the parent is critical—without it, the absolute-positioned text would be relative to the entire page instead of the video.
• z-index control: By setting the text's z-index higher than the iframe's, we guarantee the text appears above the video.

If you want the text centered perfectly over the video, replace the top and left values with:

top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Shifts text back by half its own size to center it */

This will keep the text dead-center regardless of the video's size.

内容的提问来源于stack exchange，提问作者t3x