javascript - 单击 div 时在弹出窗口中打开 YouTube 链接

Question

我想要整个按钮 (div) 在弹出窗口中打开 YouTube 链接。该弹出窗口与“popup-youtube”类连接。此代码的问题是 youtube 链接在 youtube.com 中打开，而不是在弹出窗口中打开。

关于这部分:

        <div onclick="location.href='//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>';" style="cursor:pointer;" class="btn btn-secondary popup-youtube"><span href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>" onclick="$('#button-youtube-nl').click();"><?php echo esc_html( $hero_youtube_link_text ) ?></span>

此代码的结果是在 YouTube 中打开视频，而不是在弹出窗口中。

下面的代码实际上按照我想要的方式工作:

<a id="button-youtube-nl" href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>"

但我想让它与 onclick="location.href"代码一起使用。因此，如果您单击整个 div，您将看到一个带有视频的弹出窗口。

完整代码如下:

    <?php
$hero_youtube_link_text   = get_field( 'hero_youtube_link_text' );
$hero_youtube_link_url_nl = get_field( 'hero_youtube_link_url_nl' );
$hero_youtube_link_url_en = get_field( 'hero_youtube_link_url_en' );
$hero_youtube_link_url_de = get_field( 'hero_youtube_link_url_de' );
if ( $hero_youtube_link_text ) : ?>
    <div class="hero__video">
        <div onclick="location.href='//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>';" style="cursor:pointer;" class="btn btn-secondary popup-youtube"><span href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>" onclick="$('#button-youtube-nl').click();"><?php echo esc_html( $hero_youtube_link_text ) ?></span>
            <div class="flags">
                <a id="button-youtube-nl" href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>"
                   class="popup-youtube"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/flag-nl.png"/></a>
                <a href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_de ) ?>"
                   class="popup-youtube"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/flag-de.png"/></a>
                <a href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_en ) ?>"
                   class="popup-youtube"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/flag-en.png"/></a></div>
        </div>
    </div>
<?php endif ?>

提前致谢!

Answer 1

1.使用iframe内部DIV

2.点击DIV时更改iframe src