0

I'm working on a website where i want to display the recommended videos from my youtube channel. I can load all the videos and display them but after 4-5 rows theres a problem. Some Videos are a few milimeters heigher and destroy the whole layout.

Those are the first two rows and how it should beenter image description here

And then the 4 and the 5 row looks like this enter image description here

The 3th video in the first row is few milimeteres heigher and this destroy the whole layout so how can i format all cells the same i ve tried adding display:table to the parent and display:table-cell to thec hild without success

Here is the HTML and the JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <link href="../css/youtube.css" type ="text/css" rel="stylesheet">
    <link href="../css/navigation.css" type ="text/css" rel="stylesheet">



</head>
<body>
<div id ="main">
<div class="menu">


    <div class="hori-menu">
    <ul>
      <ul>
          <li><a href="#home">Weiterschauen</a></li>
          <li><a href="userseries.html">Meine Serien</a></li>
          <li><a href="soon.html">Demnächst</a></li>
          <li><a href="suggestion.html">Vorschläge</a></li>
          <li><a class="active" href="youtube.html">YouTube</a></li>
          <li><a href="#about">Mitbewohner</a></li>
        </ul>
    </ul>
    </div>
    </div>


    <main id="container">
        <section id="video"></section>
        <div id="videos"></div>
    </main>


</body>

<script language="JavaScript">
    var key = '...';
    var videos = [];
    var totalResults = 0;

    $(document).ready(function(){
        getMyChannel();
    });

    function shuffle() {
        for (let i = videos.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [videos[i], videos[j]] = [videos[j], videos[i]];
        }

    }



    function getMyChannel(){
        var url = "https://www.googleapis.com/youtube/v3/activities";
        var options = {
            part: 'contentDetails',
            channelId: 'UCAe66hs74KDbpvK2x3ZrTXA',
            maxResults: 20,
            key: key
        }
        loadUser();

        function loadUser(){
            $.getJSON(url, options, function(data){
                loadUsersChannels(data);
            });
        }

        function loadUsersChannels(data){

            $.each(data.items, function (i, item) {
                var id = item.contentDetails.subscription.resourceId.channelId;
                getChannel(id);
            });
        }
    }



    function getChannel(id){
        var url = "https://www.googleapis.com/youtube/v3/channels";
        var options = {
            part: 'snippet,contentDetails',
            id: id,
            maxResults: 20,
            key: key

        }

        loadLists();

        function loadLists(){
            $.getJSON(url, options, function(data) {
                loadPlaylists(data);

            });

        }

        function loadPlaylists(data){
            $.each(data.items, function (i, item) {
                var id = item.contentDetails.relatedPlaylists.uploads;
                getPlaylist(id);
            });

        }
    }





    function getPlaylist(playlistId){

    var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';


    var options = {
        part: 'snippet',
        key: key,
        maxResults: 20,
        playlistId: playlistId
    }

    loadVids();

    function loadVids() {
        $.getJSON(URL, options, function (data) {
           // var id = data.items[0].snippet.resourceId.videoId;
           // mainVid(id);
            resultsLoop(data);
        });
    }

    function mainVid(id) {
        $('#video').html(`
            <iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        `);
    }


    function resultsLoop(data) {


        totalResults = totalResults + data.pageInfo.resultsPerPage;

        $.each(data.items, function (i, item) {

            var thumb = item.snippet.thumbnails.medium.url;
            var title = item.snippet.title;
            var vid = item.snippet.resourceId.videoId;

            $('#videos').append(`
                <article class="item" data-key="${vid}">
                        <div class="details">
                        <img src="${thumb}" alt="" class="thumb">   
                        <h4>${title}</h4>
                    </div>
                </article>
            `);
        });

    }

        // CLICK EVENT
    $('main').on('click', 'article', function () {
        var id = $(this).attr('data-key');
        mainVid(id);
    });

}



    </script>
  </body>
</html>

And here is the css

@mixin font-base {
    padding: 0;
    margin: 0;
    line-height: 1.3;
    font-weight: 600;
}

h4 {
    @include font-base;
}

p {
    @include font-base;
    color: grey;
    font-size: 0.7rem;
}


.container {
    width: 100%;
    background-color: #fff;
    margin: 0 auto;
    display:table;
    border-spacing: 10px;
}


section {
    height:100%;
    margin-top: 4%;
    margin-bottom:2%;
    text-align:center;
    background-color:#eee;



}
iframe{
    width:100%;
    height:900px;   
    background-color:#65626b;
    padding:8px 12px;
}
#videos{
    overflow:hidden;
}

article {
    margin:5px 5px;
    width:24%;
    float:left;
    background-color:#eee;
    border-radius:8px;



}
article div{
    border: 1px solid black;
    border-radius: 8px;
    padding: 8px 12px;


}
article:hover{
    background-color:#65626b;
    color:white;

}

.thumb {
    width: 100%;
    border-radius:8px;
}

For more infos on code please ask. Thank you!

Aniket
  • 1
  • 2

1 Answers1

0

You can try using min-height or max-height CSS property on article divs.

Aniket
  • 1
  • 2