在YouTube嵌入IFRAME [HTML和CSS]上叠加文本

Question

我正在工作一个现有的WordPress网站，以添加YouTube视频显示部分。这将是包含嵌入YouTubeIframe的子部分的部分。

每个子部分将包含一个简短的可单击文本，该文本将部分覆盖在iFrame部分上。

为此，我为YouTube视频创建了一种自定义帖子类型，该视频将具有自定义字段（用于自定义字段的ACF）。我还创建了一个短代码，该快捷代码将用于在页面上显示视频并发布。

我的问题我无法将文本覆盖在YouTube视频上，随着其背景颜色的编写，我无法将文本带有背景颜色。

这是我

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' => 'slidevideo',
                'post_status' => 'publish',
                'posts_per_page' => 4, 
                'orderby' => 'rand', 
                'order' => 'rand', 
            );

            $loop = new WP_Query( $args ); 
                
            while ( $loop->have_posts() ) : $loop->the_post(); 
                $embed_link = str_replace('.com/watch?v=', '.com/embed/', do_shortcode('[acf field="youtube_video_link"]')).'?modestbranding=1';
                ?>
                <div class="custom-video-section">
                    <div class="custom-video">              
                        <div class="custom-video-iframe">
                            <iframe width="560" height="315" src="<?php echo $embed_link; ?>" frameborder="0"></iframe>
                        </div>
                        <div class="custom-iframe-overlay">
                            <a href="<?php echo do_shortcode('[acf field="link"]'); ?>">
                                <div class="overlay-text">
                                    <p><?php echo do_shortcode('[acf field="overlay_text"]'); ?></p>
                                </div>
                            </a>
                        </div>
                    </div>                    
                </div>

                <style>
                    .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;
                    }
                    
                
                    
                </style>



                <?php                                
               
            endwhile;

            wp_reset_postdata(); 
        

         return;
       

    }

    
}

当前拥有的代码 https://prnt.sc/qya9prhwqyem

Answer 1

也许您应该尝试使用z索引！在CSS中很重要。

.custom-iframe-overlay {
背景色：RGB（255，255，255,0.9）;

                    padding: 10px;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                    margin-top : -50px;
                    z-index: 99999 **!important**;
                }