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

Question

[Виктор Уманский]

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



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

<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

[Localhost]

$(document).ready(function() {  
$('.block-video li a').on('click', function(){ 
$('video iframe').attr('src', $(this).attr('href'));
});
});

только надо добавить

<a href="Ссылку на видео">
<div class="preview">

могут быть ошибки, на скорую руку

Comments

[Виктор Уманский]

Идет переход в youtube, я же правильно вывел ссылку??

<a href="https://www.youtube.com/watch?v=<?= $fiveVideo['video'] ?>" allowfullscreen="" frameborder="0">
<div class="preview">

[Localhost]

да, получилось?

[Виктор Уманский]

Алексей, нет перекидывает на youtube(

[Localhost]

ошибку допусти я

$('.video iframe').attr('src', $(this).attr('href'));

Answer 2

[Виталий]

Я бы там где миниатюры, записывал в data атрибут ссылку, потом в js при клике доставал оттуда эту ссылку и лепил бы ее в iframe с атрибутом "&autoplay=1" чтобы видео сразу по клику запускалось (типа как здесь)

Comments

[Виктор Уманский]

не особо понимаю как это сделать?