Ютуб трейлеры

Кто подскажет как подключить ютуб себе на сайт.
Есть киносайт но хотелось добавить трейлеры с ютуба.
Как это сделать. Спасибо.

 

<ul class="nav nav-pills clearfix" role="tablist">
<li id="player-tab" role="presentation"><a href="#tab-video1" aria-controls="tab-video1" role="tab" data-toggle="tab">Плеер</a></li>
<li role="presentation"><a href="#tab-video2" aria-controls="tab-video2" role="tab" data-toggle="tab">Трейлер</a></li>
<li class="pull-right">
<a style="font-size: 30px; padding: 0px 15px; border-right: 0; z-index: 10001; position: relative;" class="js-dark" href="#" data-toggle="tooltip" data-placement="top" title="Выключить свет"><i class="fa fa-lightbulb-o"></i></a>
</li>
<li class="pull-right">
<a style="font-size: 25px; padding: 4px 15px;" class="scroll-to" href="#coment-add" data-toggle="tooltip" data-placement="top" title="Оставить отзыв"><i class="fa fa-comments-o"></i></a>
</li>
</ul>
</div>
<div class="full_r3"></div>
<div class="tab-content" style="position: relative; z-index: 10002;">
<div role="tabpanel" class="tab-pane fade" id="tab-video1">
<iframe src="http://videoapi.my.mail.ru/videos/embed/mail/******.html" rel="nofollow" frameborder="0" allowfullscreen height="390" scrolling="no" width="100%"></iframe>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab-video2">
<iframe src="http://videoapi.my.mail.ru/videos/embed/mail/******.html" rel="nofollow" frameborder="0" allowfullscreen height="390" scrolling="no" width="100%"></iframe>
Короче вот тема.
Как сделать что-бы при добавлении новости можно было ставить трейлер с ютуба именно в "Трейлер"
А норм фильм в "Плеер".

 

Спасибо.

 

А на пальцах обьянить может кто?

 

что-то пошло не так. Сделал все как было написано. Но когда добавляю ссылку с ютуба и перехожу до просмотра новости в триллер ничего не вижу. только рамку плеера.

Получилось вот так
<div role="tabpanel" class="tab-pane fade" id="tab-video2">
<iframe width="560" height="400" src="[xfvalue_treeler]" frameborder="0" allowfullscreen ></iframe>
Поставил в "Дополнительные поля новостей" для всех. При добавлении новости есть поле куда ставил ссылку с ютуба. А в итоге пустота.

 

<ul class="nav nav-pills clearfix" role="tablist">
<li id="player-tab" role="presentation"><a href="#tab-video1" aria-controls="tab-video1" role="tab" data-toggle="tab">Плеер</a></li>
<li role="presentation"><a href="#tab-video2" aria-controls="tab-video2" role="tab" data-toggle="tab">Трейлер</a></li>
<li class="pull-right">
<a style="font-size: 30px; padding: 0px 15px; border-right: 0; z-index: 10001; position: relative;" class="js-dark" href="#" data-toggle="tooltip" data-placement="top" title="Выключить свет"><i class="fa fa-lightbulb-o"></i></a>
</li>
<li class="pull-right">
<a style="font-size: 25px; padding: 4px 15px;" class="scroll-to" href="#coment-add" data-toggle="tooltip" data-placement="top" title="Оставить отзыв"><i class="fa fa-comments-o"></i></a>
</li>
</ul>
</div>
<div class="full_r3"></div>
<div class="tab-content" style="position: relative; z-index: 10002;">
<div role="tabpanel" class="tab-pane fade" id="tab-video1">
<iframe src="http://videoapi.my.mail.ru/videos/embed/mail/******.html" rel="nofollow" frameborder="0" allowfullscreen height="390" scrolling="no" width="100%"></iframe>
<div role="tabpanel" class="tab-pane fade" id="tab-video2">
<iframe width="560" height="400" src="[xfvalue_treeler]" frameborder="0" allowfullscreen ></iframe>

получилось вот так

 

Ага спасибо, пошло. Просто ссылка с ютуба была не та. Сорри за вынос мозга. Нуб)