Displays and hides contents in list form. with Javascript

Asked

Viewed 490 times

7

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 has 2 videos, what I wanted to do is that the videos are only visible when it is clicked on some option of the list.

But the video only appeared 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 another option is clicked from 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 name of the video and only appear when clicked.

It could be in javascript or in some way it doesn’t 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 list: http://jsfiddle.net/qhe7gfd3/

The project could serve not only for videos but any other content that was needed hides so does not make the page too large

javascript script div youtube

3 answers

4


Make sure it fits you. Use the same button principle:

I imagine that example might 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>
<div id="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 can 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 od other html elements. There is only one iframe and that’s who will change your src by clicking on a button. The others (image and text in my example) will change with the corresponding video.

Other examples

First case

First, to achieve the feat of pausing the youtube video from the iframe, you must replace the ?controls=0&amp;showinfo=0 for ?enablejsapi=1 at the end of the urls of your videos, as it will be possible to use the api that enables these functions.

With this just select the iframe desired with the attribute contentWindow and apply to him the: 

 .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":""}', '*');

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

Working example: Jsfiddle

Second case

Remember that this API is unique to youtube. Each host (Vimeo, Uol, Dailymotion, Youtube...) will have its own. As can be observed in this example: https://css-tricks.com/play-button-youtube-and-vimeo-api/.

However, there is a generic way to stop videos regardless of their origins. Simply reset your src. This will only serve to stop, as has already been said. However, it will require greater performance and will make the appearance of the video not instantaneous.

In the example below the video 01 belongs to Vimeo, already the video 02 belongs to Dailymotion and load normally. For this, in your iframe you must capture the code for the embed in the area focused on this in the host’s own site.

Example: Jsfiddle

Third case

I created a array with the urls of each video. Then I finished the same way we did iframes by means of the 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>
<div id="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>

  • I found this solution very interesting. I see if I can fix the toggle of what I posted. Maybe yours would be cool to put a link next to the title of the video to return.

4

<html>
<head>
    <title>Teste</title>
    script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
      function abrirVideo(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 change only the id of the videos and the function onClick, so it should call correctly regardless of how many items are placed.

CSS makes all videos start minimized.

  • That would be, but it wouldn’t be like when someone clicks on video 1 and finishes watching the video and clicks on video 2 the video 1 hides?

  • I get it. Soon I will edit with this video switching function.

  • @Go crazy, see if my example does what you want.

  • @Endou Now you have the toogle you wanted, maybe you wanted to opt for Samir’s answer, since there are more beautiful xD transitions

  • Your option is also very good, I will be testing both

4

Although I get it, what you want to do is add the video right below 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’re watching a video and you click on another video, it will stop playback of the previous video that was playing, because it will replace the entire code block that contains the video, preventing two videos from playing simultaneously, thus not ruining the user experience.

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

Here is also an example in Jsfiddle if you prefer: http://jsfiddle.net/src_code/hwr600kn/2/

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>
<div id="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>

  • I don’t know if the error is just with me, but I went to test the code and the videos don’t work. Your option is great, but only for videos. as I said in my question, I look for an option that is not only used for videos, but also for html content, and other options that decrease the size of a page, hiding content prte in a menu. example: shows and hides <div> content</div> . your option is next to the one I’m looking for.

  • Wouldn’t it be possible to replace javascript iframe only with div? and use <li> the content you want to show and hide?

  • If you tested here for the Code Snippet Stack Overflow videos will not work because the OS does not support Youtube videos. To see the code in action, go to jsFiddle link which I posted. It is working properly for me, I tested it in the latest versions of Chrome, Mozilla and Microsoft Edge. Later when I have more time I’ll see if I can create a solution to that need you mentioned now.

  • In this part of the code <li><span class="Vid" data-videoID="El3izfgerbm">Video 1</span></li> would not add other servers besides youtubbe? example: Video 1 (Youtube) (Dalymotion) (UOL) - do you understand? in each video add 3 servers or more of the same video.

  • Chun, you could take a look here: https://jsfiddle.net/zh61vq0z/11/ - see I used it the way you explained it. except the video doesn’t open at the bottom of the Playing menu. it opens at the bottom of the list. I added a list with 12 videos, but the video doesn’t open more organized. I tried to work on the css, but it gets very disorganized the way it appears. the coolest way would be to click on an option and the video opened just below, without breaking the buttons of the menu, and also the option close everything, only works in the first option

  • That’s one of the reasons you shouldn’t duplicate questions! Now it gets messy! you ask a new question related to this subject there, I answer there, then you want to take a doubt and you publish here and so on.... It’s all a mess! @Endou I made an issue in the "first question" you made related to this subject here: http://answall.com/a/104358/11886 . Navigate to the end of my reply to see the edition I added to my reply.

  • Okay I’ll answer you there

Show 2 more comments

Browser other questions tagged javascript script div youtube

You are not signed in. Login or sign up in order to post.