WordPress YouTube iframe叠加带背景色文字样式失效问题

叠加层被iframe覆盖是两个核心原因导致：

• z-index 仅对设置了非static定位（relative/absolute/fixed/sticky）的元素生效，当前.custom-iframe-overlay未设置任何定位规则，配置的高z-index完全不生效
• YouTube iframe默认使用独立渲染层，优先级高于普通页面元素，需要给iframe地址追加透明窗口模式参数，同时明确设置iframe和叠加层的层级关系

另外代码还存在几个会导致异常的小问题：

• WP_Query查询参数中order赋值为rand无效，order仅支持ASC/DESC，随机排序仅需设置'orderby' => 'rand'即可
• CSS样式写在循环内部，会重复输出4次冗余代码
• 短代码直接输出内容没有拼接返回，会导致视频块出现在页面异常位置
• 浮动布局未做清除浮动处理，容易影响后续页面元素排版
• 写死的iframe固定宽度会在移动端溢出，无法自适应容器

直接替换原短代码为以下代码即可：

add_shortcode( 'video_section', 'video_section_shortcode' );

if ( ! function_exists( 'video_section_shortcode' ) ) {
    function video_section_shortcode( ){
        // 开启输出缓冲捕获内容，避免短代码输出位置错乱
        ob_start();
        ?>
        <style>
            .custom-video-section {
                width: 100%;
                /* 清除浮动避免影响后续元素 */
                overflow: hidden;
            }

            .custom-video{
                width: 50%;
                position: relative;
                float: left;
                padding: 10px;
                box-sizing: border-box;
            }
            .custom-video-iframe iframe {
                width: 100%;
                position: relative;
                z-index: 1;
            }
            
            .custom-iframe-overlay {
                background-color: rgba(255, 255, 255,0.9);
                padding: 10px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                margin-top : -50px;
                /* 给叠加层设置相对定位，z-index高于iframe即可生效 */
                position: relative;
                z-index: 10;
            }
        </style>
        <?php

        $args = array(  
            'post_type' => 'slidevideo',
            'post_status' => 'publish',
            'posts_per_page' => 4, 
            'orderby' => 'rand',
        );

        $loop = new WP_Query( $args ); 
            
        while ( $loop->have_posts() ) : $loop->the_post(); 
            // 原链接参数后追加wmode=transparent，解决iframe层级过高问题
            $embed_link = str_replace('.com/watch?v=', '.com/embed/', do_shortcode('[acf field="youtube_video_link"]')).'?modestbranding=1&wmode=transparent';
            ?>
            <div class="custom-video-section">
                <div class="custom-video">              
                    <div class="custom-video-iframe">
                        <iframe height="315" src="<?php echo $embed_link; ?>" frameborder="0" allowfullscreen></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>
            <?php                                
           
        endwhile;

        wp_reset_postdata(); 
        // 返回捕获的输出内容
        return ob_get_clean();
    }
}

• 给.custom-iframe-overlay添加position: relative和高于iframe的z-index，让层级配置生效
• 给YouTube嵌入地址追加&wmode=transparent参数，让iframe允许普通页面元素覆盖在其上层
• 把CSS样式移到循环外，避免重复输出冗余代码
• 移除WP_Query无效的order参数，使用输出缓冲处理短代码返回内容，避免排版错乱
• 给外层容器加清除浮动规则，给视频块加box-sizing: border-box避免padding导致宽度溢出，设置iframe宽度100%实现自适应

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