Show and hide content in list form. with Javascript

Question

Show and hide content in list form. with Javascript

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (3 votes)

6

I'm trying to make a list of Youtube videos as follows.

              (ps:Eu sei que o Youtube ja tem uma playlist dele.)

Example:

List with video names.

1 - Trailer Reaction: Star Wars: Episode VII - The Force Awakens

2 - Star Wars The Force Awakens Trailer- Fan Reaction

Video 1 -

  <iframe width="560" height="315" src="https://www.youtube.com/embed/LQMo6cVGq9o?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>

Video 2 -

 <iframe width="560" height="315" src="https://www.youtube.com/embed/LwHrBVOQ8qU?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>

As you can see in the list above you have 2 videos, what you wanted to do is that the videos are only visible when you click on any option in the list.

But the video only appears below the option.

Example:

1 - Trailer Reaction: Star Wars: Episode VII - The Force Awakens

Video

 <iframe width="560" height="315" src="https://www.youtube.com/embed/LQMo6cVGq9o?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>

When you click on another option in the list, the video that is open hides and the other option appears.

It would be a kind of show and hide. only in list form.

The video would be hidden in the video name and would only appear when clicked.

It could be in javascript or somehow you do not need a very large code.

Here I have an example but this is in the form of buttons I would like to do the same only in the list: link

The project could serve not only for videos but any other content that was needed to hide it does not leave the page too big

javascript div script youtube

asked by anonymous 13.12.2015 / 00:57

3 answers

3

<html>
<head>
    <title>Teste</title>
    script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>functionabrirVideo(i){$('iframe').attr('src',$('iframe').attr('src'));$(".videos").not("#video" + i).hide();
        $("#video" + i).show();
      }
    </script>
    <style type="text/css">
      .videos {
        display: none;
      }
    </style>
</head>
<body>
  <p id="texto1" onclick="abrirVideo(1)">1 - Trailer Reaction: Star Wars: Episode VII - The Force Awakens</p>
  <iframe id="video1" class="videos" width="560" height="315" src="https://www.youtube.com/embed/LQMo6cVGq9o?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>
  <p id="texto1" onclick="abrirVideo(2)">2 - Star Wars The Force Awakens Trailer- Fan Reaction</p>
  <iframe id="video2" class="videos" width="560" height="315" src="https://www.youtube.com/embed/LwHrBVOQ8qU?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>
</body>
</html>

Using a script to generate the list you can only change the id of videos and the onClick function, so it should call correctly regardless of how many items are placed.

CSS causes all videos to start minimized.

13.12.2015 / 01:40

3

Although I understand, what you want to do is add the video just under each title when clicked.

I created this script, in which it creates the element that contains the video and shows it just below the title. This solution also has the advantage that when you are watching a video and click on any other video, it will stop the previous video playback that was playing, because it will replace all the block of code that contains the video, avoiding that two videos to play simultaneously, thus not spoiling the user experience.

I created an attribute - data-videoID that is implemented in each item / video in the Video Gallery list, which will contain id of the Youtube video. So when we click on a video / item in the list, this id will be obtained and replaced directly in the creation of iframe for each video through JavaScript.

You also have an example in JSFiddle if you prefer: link

var buttons = $('#videoGallery .vid');
var liHeight = $('#videoGallery li').height();

buttons.click(function(){
    var videoID = $(this).attr('data-videoID');
    var videos = $('<div id="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/'+videoID+'?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>');

    $('#meuVideo, .nowPlaying').remove();
    videos.insertAfter(this).hide().slideDown("fast");
    $('<span class="nowPlaying">▼ Reproduzindo ...</span>').insertAfter(this);
    $('html, body').animate({
        scrollTop: (videos.offset().top-liHeight)
    }, 200);
});

$('#close').click(function(){
    $('#meuVideo, .nowPlaying').remove();
});

#videoGallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#videoGallery span {
    display: block;
    background-color: steelblue;
    color: #fff;
    font-family: sans-serif;
    cursor: pointer;
    padding: 4px 10px;
    border-bottom: 1px solid #fff;
}

#videoGallery li {
    position: relative;
}
span.nowPlaying {
    position: absolute;
    top: 0;
    right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divid="videoGallery">
 <ul>
    <li><span class="vid" data-videoID="6AmRg3p79pM">Video 1</span></li>
    <li><span class="vid" data-videoID="MkLFlaWxgJA">Video 2</span></li>
    <li><span class="vid" data-videoID="kIhe7nFcbUg">Video 3</span></li>
    <li><span class="vid" data-videoID="El3IZFGERbM">Video 4</span></li>
    <li><span id="close">Fechar Tudo</span></li>
</ul>
</div>

13.12.2015 / 04:00

What is the value of \ 1 in the regular expression in javascript? How to limit log display to 30 days from today's date

score 4 · Accepted Answer

See if it suits you. Uses the same button principle:

I imagine this example can satisfy you

I merged the two previous examples:

var buttons = $('ul li');
var videos = $('#videoGallery div');
var titles = $('#videoGallery div h3');
var iframe = $('#videoGallery iframe');


var urls = [
  "https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1",
  "https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1",
  "https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1",
  "https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1",
  "https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1",
  "https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1",
  "https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1",
  "https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1"
]

buttons.on('click', function (e) {
    var index = buttons.get().indexOf(this);
		var videoIndex = videos.eq(index);
    iframe.attr("src", urls[index])
    buttons.removeClass("selected")
    $(this).toggleClass("selected")
    videos.removeClass('yesDisplay');
    videoIndex.toggleClass('yesDisplay');
    $('body').animate({scrollTop:(videoIndex.offset().top)}, 200);
 });

.video {
    display:none;
}
.yesDisplay {
    display:block !important;
}
img{
  height: 80px
}
ul{
  margin: 0;
  padding: 0;
}
ul li{
  display: block;
  height: 30px;
  line-height: 30px;
  background: #333333;
  margin: 0;
  cursor: pointer;
  padding-left: 10px;
  color: #ffffff;
}
ul li:hover{
  background: #666666;
  color: #ffffff;
}
.selected{
  background: #cccccc;
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="videoGallery">
  <ul>
    <li>Vídeo 01</li>
    <li>Vídeo 02</li>
    <li>Vídeo 03</li>
    <li>Vídeo 04</li>
    <li>Vídeo 05</li>
    <li>Vídeo 06</li>
    <li>Vídeo 07</li>
    <li>Vídeo 08</li>
  </ul>

  <div class="yesDisplay video">
    <h3>Vídeo 01</h3>
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"alt="">
    <p>Este é o vídeo 1:</p>
  </div>
  <div class="video">
    <h3>Vídeo 02</h3>
    <img src="http://goo.gl/ytbJn8"alt="">
    <p>Este é o vídeo 2:</p>
  </div>
  <div class="video">
    <h3>Vídeo 03</h3>
    <img src="http://www.last-video.com/wp-content/uploads/2013/11/superbe-image-de-poissons-sous-l-eau.jpg"alt="">
    <p>Este é o vídeo 3:</p>
  </div>
  <div class="video">
    <h3>Vídeo 04</h3>
    <img src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg"alt="">
    <p>Este é o vídeo 4:</p>
  </div>
  <div class="video">
    <h3>Vídeo 05</h3>
    <img src="http://www.conceptcarz.com/images/Citroen/2010-Citroen-Survolt-Concept-Image-01.jpg"alt="">
    <p>Este é o vídeo 5:</p>
  </div>
  <div class="video">
    <h3>Vídeo 06</h3>
    <img src="http://i1008.photobucket.com/albums/af201/visuallightbox/Butterfly/8-1.jpg"alt="">
    <p>Este é o vídeo 6:</p>
  </div>
  <div class="video">
    <h3>Vídeo 07</h3>
    <img src="http://michaeldaviddesign.com/themes/escape/files/stacks_image_85.jpg"alt="">
    <p>Este é o vídeo 7:</p>
  </div>
  <div class="video">
    <h3>Vídeo 08</h3>
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_grGhfAqTFlVrVmKC3HJ9R6CuXPfgz6U6ikgOnfgHxiu38c13"alt="">
    <p>Este é o vídeo 8:</p>
  </div>

  <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>
</div>

You may notice that it will load very quickly, since as I said in the comment the other elements load quickly. And that's what happens, it does not load all the videos, but the other html elements. There is only iframe and it's the one that will change your src when clicking any button. The others (image and text, in my example) will change with the corresponding video.

Other examples

First case

First of all, in order to get the pause of youtube video from iframe , you should replace the ?controls=0&showinfo=0 with ?enablejsapi=1 with the end of your videos urls, so that it will be possible to use api that enables these functions.

With this, just select the iframe you want with the contentWindow attribute and apply it to:

 .postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
 // pauseVideo - outra opção seria o playVideo

And for the video to appear as at the beginning:

 .postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');

In the latter case, in addition to ?enablejsapi=1 must be added after &version=3&playerapiid=ytplayer .

Example working: JsFiddle

Second case

Remember that this API is specific to youtube. Each host (Vimeo, Uol, Dailymotion, Youtube ...) will have its own. As can be seen in this example: link .

However, there is a generic way to stop videos regardless of their source. Just reset your src . This will only serve to stop, as has already been said. However, it will require more performance and will not make the video appear instantaneously.

In the example below video 01 belongs to Vimeo, video 02 belongs to Dailymotion and loads normally. To do this, in your iframe you should capture the code for the embed in the area targeted to this on the host's own site.

Example: JsFiddle

Third case

I created a array with the urls of each video. Then I accessed the same way as in iframes by means of index of buttons .

var buttons = $('ul li');
var videos = $('#videoGallery div');
var titles = $('#videoGallery div p');
var iframe = $('#videoGallery div iframe');

var urls = [
  "https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1",
  "https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1",
  "https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1",
  "https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1"
]

function pauseVideo() {
  var iframes = document.getElementsByTagName("iframe");
  iframes[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

}
buttons.on('click', function() {
  var index = buttons.get().indexOf(this);
  var videoIndex = videos.eq(index);
  titles.html("Vídeo " + (parseFloat(index)+1));
  iframe.attr("src", urls[index])
  $('body').animate({
    scrollTop: (videos.offset().top)
  }, 200);
  buttons.removeClass("selected")
  $(this).toggleClass("selected")
  pauseVideo();
});

.yesDisplay {
  display: block !important;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: block;
  height: 30px;
  line-height: 30px;
  background: #333333;
  margin: 0;
  cursor: pointer;
  padding-left: 10px;
  color: #ffffff;
}
ul li:hover {
  background: #666666;
  color: #ffffff;
}
.selected {
  background: #cccccc;
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="videoGallery">
  <ul>
    <li>Vídeo 01</li>
    <li>Vídeo 02</li>
    <li>Vídeo 03</li>
    <li>Vídeo 04</li>
  </ul>
  <div class="yesDisplay">
    <p>Video 1</p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1"frameborder="0" id="IframeVideo1" allowfullscreen></iframe>
  </div>
</div>