Переключатель youtube видео на сайте?

156

15 сентября 2017, 22:31

Ребята как сделать на скриншоте переключалку видео, то есть с права видим миниатюры, клацаем на нее и в левой стороне подгружается само видео, есть у кого то такой скрипт.

Вот так у меня выводятся сам блок с видео и миниатюр!

<div class="video-news-block">
            <div class="col-md-8">
                <div class="video">
                    <?php foreach ($fiveVideoArticles as $i => $fiveVideo) : ?>
                    <?php if ($i === 0): ?>
                    <iframe width="750" height="440" src="http://www.youtube.com/embed/<?= $fiveVideo['video'] ?>?rel=0" allowfullscreen="" frameborder="0"></iframe>
                </div>
            </div>
            <div class="col-md-4">
                <div class="block-video">
                    <h6>
                        <?= Html::img('/web/images/info-portal/menu-video.png', ['alt' => '']) ?>
                        Новое видео</h6>
                    <ul>
                        <?php continue; ?>
                        <?php endif; ?>
                        <li>
                            <a href="#">
                                <div class="preview">
                                    <?= Html::img('http://img.youtube.com/vi/'.$fiveVideo['video'].'/0.jpg', ['alt' => '']) ?>
                                </div>
                                <div class="video-desc">
                                    <h3>
                                        <?php
                                        $string = strip_tags($fiveVideo['text']);
                                        $string = substr($string, 0, 100);
                                        $string = rtrim($string, "!,.-");
                                        $string = substr($string, 0, strrpos($string, ' '));
                                        echo $string . "… ";
                                        ?>
                                    </h3>
                                    <span class="time"><?= $fiveVideo['duration'] ?></span>
                                </div>
                            </a>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
        </div>

Answer 1

$('.video').on('click', function(e) { 
  e.preventDefault(); // предотвращаем стандартное поведение ссылки 
  var vid = $(this).attr('data-video'); // получаем id видео из атрибута 
  $('.bigvideo iframe').attr('src', 'https://www.youtube.com/embed/' + vid); // и подставляем его в iframe 
});

a { 
  display: block; 
  cursor: pointer; 
} 
 
.bigvideo { 
  max-width: 200px; 
  margin: 0 auto; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="#" class="video" data-video="75JjflWKs98">Видео 1</a> 
<a href="#" class="video" data-video="vnYm_kguurE">Видео 2</a> 
<a href="#" class="video" data-video="iGk5fR-t5AU">Видео 3</a> 
<a href="#" class="video" data-video="3tmd-ClpJxA">Видео 4</a> 
 
<div class="bigvideo"> 
  <iframe src="https://www.youtube.com/embed/75JjflWKs98" frameborder="0" allowfullscreen></iframe> 
</div>