Please tell me how to make three videos in one line using this script:

<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>

It is necessary that the three videos were in one line in the center (the script is a stub).

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

Solution with 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"); }); });
  • Thank you so much for the explanation code! only the question is different now - you need to create a file and write it with the js part extension in the root of the site - right? code html part - insert in the desired place on the site? And now what to do or where to insert this css part code? Sorry if that - for my not experience! - Alex
  • You insert html into the code of your page, with css and js you can do the same, only the styles need to be wrapped in the <style> tag the code </ style>, and the scripts in the <script> tag </ script>. Still there is an option with the removal of styles and scripts in separate files. Styles will be for example in styles.css, scripts in scripts.js, then include these files in html, besides, do not forget that you need to connect jQuery. - Kison
  • Perhaps jQuery is already connected as it is used in your question. - Kison
  • Yes, one more moment, the js code must be added either in front of the closing body tag or wrapped in a jquery design dom ready - Kison
  • Thank you so much! Just now there are very few people who help after the fact - my respect and respect for those who are still able to prompt and paint correctly - thanks for the existence of such! Only a small question remains on the topic - is there a website developers.google.com/speed/libraries/#jquery - is it just under the YouTube file - can it be used or should it be used together with jQuery? - Alex