title: Overlaying text on youtube embed iframe [html and css]
body: <p>I'm working an existing Wordpress website to add youtube video display section. This would be a section with sub section containing a youtube iframe embed.</p>
  <p>Each sub section will contain a short clickable text that will partly overlay on the iframe section.</p>
  <p>To do this, Ive created a custom post type for youtube videos, which will have custom fields (used acf for custom field). I have also created a shortcode that would be used to display the videos on pages and post.</p>
  <p><strong>My problem</strong> I can not get the text to overlay on the youtube video with a background color as its background color gets over written.</p>
  <p>Here is my code</p>
  <pre><code>add_shortcode( 'video_section', 'video_section_shortcode' );
  
  if ( ! function_exists( 'video_section_shortcode' ) ) {
      function video_section_shortcode( ){
  
          /**
           * show 4 video on page reload.
           
           */
              $args = array(  
                  'post_type' =&gt; 'slidevideo',
                  'post_status' =&gt; 'publish',
                  'posts_per_page' =&gt; 4, 
                  'orderby' =&gt; 'rand', 
                  'order' =&gt; 'rand', 
              );
  
              $loop = new WP_Query( $args ); 
                  
              while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post(); 
                  $embed_link = str_replace('.com/watch?v=', '.com/embed/', do_shortcode('[acf field=&quot;youtube_video_link&quot;]')).'?modestbranding=1';
                  ?&gt;
                  &lt;div class=&quot;custom-video-section&quot;&gt;
                      &lt;div class=&quot;custom-video&quot;&gt;              
                          &lt;div class=&quot;custom-video-iframe&quot;&gt;
                              &lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;&lt;?php echo $embed_link; ?&gt;&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;custom-iframe-overlay&quot;&gt;
                              &lt;a href=&quot;&lt;?php echo do_shortcode('[acf field=&quot;link&quot;]'); ?&gt;&quot;&gt;
                                  &lt;div class=&quot;overlay-text&quot;&gt;
                                      &lt;p&gt;&lt;?php echo do_shortcode('[acf field=&quot;overlay_text&quot;]'); ?&gt;&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;                    
                  &lt;/div&gt;
  
                  &lt;style&gt;
                      .custom-video-section {
                          width: 100%;
                          
  
                      }
  
                      .custom-video{
                          width: 50%;
                          position: relative;
                          float: left;
                          padding: 10px;
                      }
                      
                      .custom-iframe-overlay {
                          background-color: rgb(255, 255, 255,0.9);
                          
                          padding: 10px;
                          border-bottom-left-radius: 10px;
                          border-bottom-right-radius: 10px;
                          margin-top : -50px;
                          z-index: 99999;
                      }
                      
                  
                      
                  &lt;/style&gt;
  
  
  
                  &lt;?php                                
                 
              endwhile;
  
              wp_reset_postdata(); 
          
  
           return;
         
  
      }
  
      
  }
  </code></pre>
  <p>Here is what I currently have <a href="https://prnt.sc/qyA9PrHWqyEM" rel="nofollow noreferrer">https://prnt.sc/qyA9PrHWqyEM</a></p>