<?php

/**
 * Displays the trailer part
 *
 * @package WordPress
 * @subpackage IZI_THEME
 * @since 1.0.0
 */
?>
<!-- TRAILER BEGIN -->
<section class="container-fluid py-5">
    <h2 class="htitles text-center my-5">Bandes annonces à voir</h2>
    <div class="row">
        <?php
            $argstrailer = array(
                'post_type'		    => 'series',
                'posts_per_page' 	=> 3
            );
            $cptid = 1;
            $trailerPosts = new WP_Query($argstrailer);

            if ($trailerPosts->have_posts()) : while ($trailerPosts->have_posts()) : $trailerPosts->the_post();
                $youtube_id = get_post_meta($post->ID, '_id_iframe', true);
                if (empty($youtube_id) || $youtube_id == 'insérez votre url YouTube ici !' || $youtube_id == 'URL invalide !') {
                    $youtube_id = 'Ya-N4per4yw';
                }
        ?>

        <div class="col-12 col-md-6 col-xl-4 p-0 triggeron" id="<?php echo $cptid; ?>">
            <img class="trailer-thumb w-100" src="https://img.youtube.com/vi/<?php echo $youtube_id; ?>/mqdefault.jpg" id="trailer<?php echo $cptid; ?>" data-value="<?php echo $youtube_id; ?>" data-title="<?php the_title(); ?>">
            <h3 class="youtubetitle"><?php the_title(); ?></h3>
            <div class="youtubeplay"></div>
        </div>

        <?php 
        $cptid++;
        endwhile;
            else : ?>
                <div class="article-content">
                    <p>Aucun contenu à afficher</p>
                </div>
            <?php endif;
            // Restore original post data.
            wp_reset_postdata();
        ?>

    </div>
</section>
<!-- TRAILER END -->

<!-- TRAILER OVERLAY BEGIN -->
<div id="overlay">
    <div class="overlay-effect triggeroff"></div>
    <div class="iframebox">
        <button aria-label="close modal" type="button" class="overlay-btn triggeroff">X</button>
        <!-- <iframe id="videoIframe" src="https://www.youtube.com/embed/l7nzodXfVsg" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
    </div>
</div>
<!-- TRAILER OVERLAY END -->