1

Подскажите, пожалуйста, как сделать три видео в одну строку с использованием этого скрипта:

<div onclick="$(this).replaceWith('<iframe width=\'100%\' height=\'364\' src=\'http://www.youtube.com/embed/w-7rVHZUeLE?autoplay=1&amp;rel=0\' frameborder=\'0\' allowfullscreen></iframe><br/>');"><img src="http://clubsar.ru/assets/templates/turfirma/main-video.jpg" width="100%"/></div>

Нужно чтобы три видео были в одну строку по центру (скрипт заглушка).

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 12 сен 2016 в 6:46

1 ответ 1

1

Решение с использованием youtube js api - jsFiddle

html part

 <div class="inline-videos">
        <div class="controls">
          <div id="show-videos"><img src="http://clubsar.ru/assets/templates/turfirma/main-video.jpg" width="100%"/></div>
        </div>

        <!-- video one -->
        <div class="inline-video">
            <div id="video1"></div>
        </div>
        <!-- video one -->
        <div class="inline-video">
            <div id="video2"></div>
        </div>
        <!-- video one -->
        <div class="inline-video">
            <div id="video3"></div>
        </div>
    </div>

css part

.inline-video {  
    display: inline-block;
    height: 200px;
    width: 250px;
}

#show-videos {
  cursor: pointer;
}

js part

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player,
    videoId = "w-7rVHZUeLE";

function onYouTubeIframeAPIReady() {
    console.log("Youtube api ready!");
}

function initPlayer(containerId, videoId) {
    new YT.Player(containerId, {
        height: '200',
        width: '250',
        videoId: videoId,
        events: {
            'onReady': onPlayerReady
        }
    });
}            

function onPlayerReady(event) {
    event.target.playVideo();
}            

$(function(){
    console.log("dom ready");
      $("#show-videos").on('click', function(){
        $(this).hide();
        initPlayer("video1", "w-7rVHZUeLE");
        initPlayer("video2", "w-7rVHZUeLE");
        initPlayer("video3", "w-7rVHZUeLE");
    });
}); 
6
  • Огромное спасибо за пояснение кодом! только вопрос теперь в другом - надо создать фаил и записать с расширением js part в корне сайта - верно? код html part - вставлять в желаемое место на сайте? А вот теперь что делать или куда вставлять этот код css part? Извините если что - за мою не опытность!
    – алекс
    12 сен 2016 в 19:53
  • html вставляете в код вашей страницы, с css и js тоже можете поступить аналогично, только стили нужно обернуть в тег <style>код</style>, а скрипты в тег <script>код</script>. Еще есть вариант с выносом стилей и скриптов в отдельные файлы. Стили будут к примеру в styles.css, скрипты в scripts.js, затем подключаете эти файлы в html кроме того не забудьте, что вам нужно подключить jQuery.
    – Den Kison
    13 сен 2016 в 5:42
  • Возможно jQuery уже подключен так как в вашем вопросе он используется.
    – Den Kison
    13 сен 2016 в 5:42
  • Да, еще момент, js код нужно добавить либо в перед закрывающим тегом body либо обернуть в конструкцию jquery dom ready
    – Den Kison
    13 сен 2016 в 6:17
  • Огромное спасибо! Просто таких сейчас мало кто помогают по факту - мое уважение и почтение к тем кто еще способен правильно подсказать и расписать - спасибо что такие существуют! Только остался малый вопрос по теме - есть сайт developers.google.com/speed/libraries/#jquery - там как раз под ютуб фаил - его можно использовать или совместно надо с jQuery?
    – алекс
    13 сен 2016 в 12:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.