单击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

Answer 2

//将其添加到代码中

$(this).click(function() { window.location = href; });

在这里您还可以使用您的Div Id

$("#DivId").click(function() { window.location = href; });