Question

我已经在其中构建了一个带有youtube iframe的bootstrap轮播。我创建了一个循环，因为该网站是为Wordpress构建的。

在循环中回显的代码：

<div class="video-overlay" onclick="
     thevid=document.getElementById('thevideo');
     thevid.style.display='block'; this.style.display='none'; 
     document.getElementById('iframe').src = 
     document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">

     for instance: a play button here                  
</div>

<div class="videocontainer" id="thevideo" style="display: none;">
     <iframe id="iframe" wmode="opaque" class="video" src="https://www.youtube.com/embed/" . $videoid .  "?rel=0&amp;modestbranding=1&autohide=1&showinfo=0&controls=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
</div>

在点击视频叠加层之前，de iframe不可见。单击视频叠加层时，de iframe中的url也会从autoplay = 0更改为autoplay = 1.

问题是：无论点击什么视频叠加，它总是第一个更改的iframe 。

如果我错了，请纠正我，但我认为可以通过更改可见视频的iframe ID来解决问题。

如何更改有效视频的iframe ID？

<iframe id="iframe-active" wmode="opaque" class="video" src="https://www.youtube.com/embed/" . $videoid .  "?rel=0&amp;modestbranding=1&autohide=1&showinfo=0&controls=0&autoplay=0" frameborder="0" allowfullscreen></iframe>

修改这是我的完整循环：

    $loop = new WP_Query( array( 'post_type' => 'impressie') );
    $hasExecuted = false;
    while ( $loop->have_posts() ) : $loop->the_post();

        ?>
        <div class="<?php if ($hasExecuted == false) { echo "active"; }?> item">
            <?php

            global $post;
            $meta = get_post_meta($post->ID,'_video_meta',TRUE);

            if ( $meta['type'] == "youtube" ) {

                /* Break the video URL apart to find the ID */
                $loc = strpos($meta['url'],"v=");
                $videoid = substr($meta['url'], $loc + 2);

                /* echo de video in iframe */
                ?>
                <div class="video-overlay" onclick="thevid=document.getElementById('thevideo');
                                thevid.style.display='block'; this.style.display='none';
                                document.getElementById('activeiframe').src =
                                document.getElementById('activeiframe').src.replace('autoplay=0','autoplay=1');">

                    <div class='videotitle'>
                <?php
                        the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' );
                ?>
                    </div>

                    <div class='playbutton'>
                        <img width='70px' style="cursor:pointer;" src="wp-content/themes/nazomeren/img/play.png" alt="play video" />
                    </div>

                </div>

                <div class="videocontainer" id="thevideo" style="display:none;">
                    <iframe id="<?php if ($hasExecuted == false) { echo "active"; }?>iframe"  class="video" src="https://www.youtube.com/embed/<?php echo $videoid ?>?rel=0&amp;modestbranding=1&autohide=1&showinfo=0&controls=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
                 </div>
                <?php

            } else if ( $meta['type'] == "vimeo" ) {

                /* Vimeo's URL structure is slightly different and needs breaking apart differently */
                $loc = explode( "/", $meta['url'] );
                $videoid = end($loc);

                /* Vimeo stores all info about each video in JSON, PHP and XML Formats. This is the PHP version */
                $hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$videoid.php"));

                /* Depending on the size of the image needed you could use ['thumbnail_large'], ['thumbnail_medium'] or ['thumbnail_small'] */
                echo '‹img src="'.$hash[0]['thumbnail_large'].'" alt="the_title();" /›';

            } else {

                the_post_thumbnail( 'thumbnail' );

            }
            ?>

        </div>
        <?php
        $hasExecuted = true;
    endwhile;
    ?>

自动更改活动幻灯片的ID

0 个答案: