carrousel ou diaporama avec des vidéos

[Mili]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.messagesrecus.com

Description du problème

Bonjour,

J'aimerai pour faire apparaitre sur le portail et la page d'accueil des vidéos, que j'ai mises sur ma chaine Youtube, sous forme de carrousel ou diaporama afin qu'il soit possible de les voir et de les écouter en cliquant sur la vidéo choisie. Est-ce que c'est possible ? Je ne connais pas grand chose aux scripts; J'ai recherché un logiciel en ligne ou gratuit mais je n'ai pas trouvé. Merci qui m'aidera.

[Adam_sfp]

Bonsoir

Vous pouvez utiliser l'api youtube et mettre en place un widget de ce style qui sera relié à votre chaine youtube.
https://github.com/bachors/jQuery-Youtube-Channels-Playlist

Avez vous un compte google ? Il en faut un pour récupérer votre clé API.
Si c'est ce type de widget que vous voulez et si vous avez un compte google à ce moment la je peux vous expliquez comment le mettre en place sur votre forum.

Cdt.

[Mili]

Bonjour,

Merci pour votre aide, oui j'ai un compte Google. Je serais ravie si vous m'expliquiez comment faire. Cela peut-il fonctionner pour un grand nombre de vidéos (j'en ai enregistrées 147 pour l'instant et j'en refais régulièrement) ?
Je vous souhaite une agréable journée

[Adam_sfp]

Bonjour

Oui cela va fonctionner pour toutes vos vidéos.
Je vous montre le résultat avec votre chaîne DEMO
(j'utilise ma clé que j'ai activé temporairement pour vous montrer)
Sur votre forum cela prendra la largeur de votre page d’accueil ou widget du portail.


J'éditerai mon post pour vous expliquer comment créer votre clé ainsi que les codes et comment les installer.  

C'est limite plus laborieux de créer la clé que d’installer les codes.

Pour la création de la clé il faut être connecté à votre compte google.
Si vous n'avez jamais crée  d'applications logiquement il faut faire cela:

Rendez vous sur cette adresse Console Developer

Validez les conditions d'utilisations.

En haut cliquez sur ' Activer les Api et les services '
Descendre et cliquez sur ' Youtube Data API V3 '
Cliquez sur Activer
Créer un projet
Nouveau projet
Mettre un nom par exemple Youtube Api Widget
Créer

Allez ensuite sur identifiants
Créer des identifiants
Choisir Clé API

Ouf c'est presque bon votre clé est la (copier et coller la dans un document texte pour la garder de coté.)
Il faut restreindre la clé
Choisissez référents http
Et collez plus bas le lien de votre forum et enregistrez.

c'est terminé pour la clé  
*il est possible que la clé ne soit pas active dans l'immédiat.. mais après quelques minutes.



**********************************************************


On passe au code

A mettre dans votre CSS

Code:


/** START YOUTUBE WIDGET  **/



.ycp {
 font-family: "Roboto","Helvetica","Arial",sans-serif;
 font-size: 1em;
 color: #444;
 background: #000;
 display: block;
 width: 100%;
 height: 500px;
 box-shadow: 0 4px 4px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.ycp,
.ycp .belah {
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}

.ycp .belah {
 display: inline-block;
 vertical-align: top;
 height: 100%;
}

.ycp .belah:first-of-type {
 width: 65%;
}

.ycp .belah:last-of-type {
 width: 35%;
}

.ycp .belah .luhur {
 color: #fff;
 background: #222;
 display: block;
 width: 100%;
 height: 70px;
 box-sizing: border-box;
 padding: 10px;
 margin: 0;
}

.ycp .belah .handap {
 color: #ddd;
 background: #111;
 height: calc(100% - 70px);
 padding: 0;
 overflow-y: auto;
 -moz-box-shadow: inset 0 0 10px #000;
 -webkit-box-shadow: inset 0 0 10px #000;
 box-shadow: inset 0 0 10px #000;
}

.ycp .belah .handap,
.ycp .belah .bingkay {
 display: block;
 width: 100%;
 box-sizing: border-box;
 margin: 0;
}

.ycp .belah .bingkay {
 height: 100%;
 border: 0;
}

.ycp .belah .luhur span.tombol {
 margin-right: 20px;
 color: silver;
}

.ycp .belah .luhur span.about {
 float: right;
 background: #111;
 padding: 2px;
 border-radius: 50%;
 width: 20px;
 height: 20px;
 text-align: center;
}

.ycp a {
 text-decoration: none;
 outline: 0;
}

.ycp a img {
 border: 0;
}

.ycp .belah.ycp_vid_play {
 cursor: pointer;
}

.ycp .belah.ycp_vid_play a {
 background: #e52d27;
 width: 120px;
 height: 75px;
 display: block;
 border-radius: 10%;
 position: relative;
 top: calc(50% - 35px);
 left: calc(50% - 60px);
 text-align: center;
}

.ycp .belah.ycp_vid_play a::before {
 color: #fff;
 content: "\25B6";
 z-index: 100;
 font-size: 50px;
}

.ycp .belah .thumb {
 float: left;
 margin-right: 10px;
 position: relative;
 height: 61px;
}

.ycp .belah .thumb span {
 position: absolute;
 right: 2px;
 bottom: -2px;
 padding: 2px;
 background: #000;
 color: silver;
 font-size: .8em;
}

.ycp .belah .play {
 margin: 0;
 padding: 10px;
 display: block;
 overflow: hidden;
 *overflow: visible;
}

.ycp .belah .luhur div.title {
 color: #fff;
 border-bottom: 1px solid #111;
 padding-bottom: 5px;
 margin-bottom: 5px;
}

.ycp .belah .handap div.title {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.ycp .belah span.mute,
.ycp .belah span.about a {
 color: #767676;
 font-size: .8em;
}

.ycp .belah .thumb img {
 width: 80px;
 height: 100%;
 border: 2px solid #000;
}

.ycp .belah .play:hover,
.ycp .belah .vid-active {
 background: #000;
}

.ycp .belah .luhur .vid-prev,
.ycp .belah .luhur .vid-next,
.ycp .belah .play {
 cursor: pointer;
}

@media screen and (max-width:767px) {
 .ycp {
 height: 1000px;
 }

 .ycp .belah,
 .ycp .belah:first-of-type,
 .ycp .belah:last-of-type {
 width: 100%;
 display: block;
 }

 .ycp .belah:first-of-type {
 height: 40%;
 }

 .ycp .belah:last-of-type {
 height: 60%;
 };
}

 /** END YOUTUBE WIDGET  **/


JAVASCRIPT
Dans gestion des codes javascript en cochant sur toutes les pages

Code:


/******************************************************
* #### jQuery-Youtube-Channels-Playlist v06 ####
* Coded by Ican Bachors 2014.
* https://github.com/bachors/jQuery-Youtube-Channels-Playlist
* Updates will be posted to this site.
******************************************************/

$.fn.ycp = function(j) {
    var n = {
        playlist: 10,
        autoplay: false,
        related: false
    };
    j.playlist = (j.playlist == undefined ? n.playlist : j.playlist);
    j.autoplay = (j.autoplay == undefined ? n.autoplay : j.autoplay);
    j.related = (j.related == undefined ? n.related : j.related);
    $(this).each(function(i, a) {
        var b = ($(this).attr('id') != null && $(this).attr('id') != undefined ? '#' + $(this).attr('id') : '.' + $(this).attr('class')),
            title = ($(this).data('ycp_title') == undefined ? 'YCP.js' : $(this).data('ycp_title')),
            channel = $(this).data('ycp_channel'),
            html = '<div class="ycp">' + '<div class="belah ycp_vid_play" title="Play video">' + '</div>' + '<div class="belah" id="ycp_youtube_channels' + i + '">' + '</div>' + '</div>';
        $(this).html(html);
        if (channel.substring(0, 2) == 'PL' || channel.substring(0, 2) == 'UU') {
            var c = '';
            ycp_list(title, channel, c, i, b)
        } else {
            var d = (channel.substring(0, 2) == 'UC' ? 'id' : 'forUsername');
            ycp_play(title, channel, d, i, b)
        }
    });

    function ycp_play(g, c, d, e, f) {
        $.ajax({
            url: 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&' + d + '=' + c + '&key=' + j.apikey,
            crossDomain: true,
            dataType: 'json'
        }).done(function(a) {
            var b = a.items[0].contentDetails.relatedPlaylists.uploads,
                pageToken = '';
            ycp_list(g, b, pageToken, e, f)
        })
    }

    function ycp_list(h, f, g, k, l) {
        $.ajax({
            url: 'https://www.googleapis.com/youtube/v3/playlistItems?part=status,snippet&maxResults=' + j.playlist + '&playlistId=' + f + '&key=' + j.apikey + '&pageToken=' + g,
            dataType: 'json'
        }).done(function(c) {
            var d = '';
            d += '<div class="luhur">';
            d += '<div class="title">' + h + '</div>';
            d += '<span class="tombol vid-prev" title="Previous videos">Prev</span> ';
            d += '<span class="tombol vid-next" title="Next videos">Next</span><span class="about" title="ycp.js"><a href="https://github.com/bachors/jQuery-Youtube-Channels-Playlist" target="_BLANK">â¥</a></span></div><div class="handap">';
            $.each(c.items, function(i, a) {
                if (c.items[i].status.privacyStatus == "public") {
                    var b = c.items[i].snippet.resourceId.videoId;
                    ycp_part(b, i, k, l);
                    d += '<div class="play" data-vvv="' + b + '" data-img="' + c.items[i].snippet.thumbnails.high.url + '" title="' + c.items[i].snippet.title + '"><div class="thumb"><img src="' + c.items[i].snippet.thumbnails.default.url + '" alt=" "><span class="tm' + i + '"></span></div>';
                    d += '<div class="title">' + c.items[i].snippet.title + '</div><span class="mute by' + i + '"></span><br><span class="mute views' + i + '"></span> <span class="mute">-</span> <span class="mute date' + i + '"></span></div>'
                }
            });
            d += '</div>';
            $(l + ' .ycp div#ycp_youtube_channels' + k).html(d);
            if (c.prevPageToken == null || c.prevPageToken == undefined) {
                var e = $(l + ' .ycp div#ycp_youtube_channels' + k + ' div.play').attr("data-vvv"),
                    imag = $(l + ' .ycp div#ycp_youtube_channels' + k + ' div.play').attr("data-img");
                if (j.autoplay == false) {
                    $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').html('<a href="#"></a>');
                    $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('background', 'url(' + imag + ') no-repeat');
                    $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('-webkit-background-size', 'cover');
                    $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('-moz-background-size', 'cover');
                    $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('-o-background-size', 'cover');
                    $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('background-size', 'cover')
                } else {
                    $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').html('<iframe src="//www.youtube.com/embed/' + e + '?rel=' + (j.related ? 1 : 0) + '&amp;autoplay=1" allowfullscreen="" frameborder="0" class="bingkay"></iframe>')
                }
                $(l + ' .ycp div#ycp_youtube_channels' + k + ' div').removeClass('vid-active');
                $(l + ' .ycp div#ycp_youtube_channels' + k + ' div.play:eq(0)').addClass('vid-active')
            } else {
                $(l + ' .ycp div#ycp_youtube_channels' + k + ' span.vid-prev').click(function() {
                    g = c.prevPageToken;
                    ycp_list(h, f, g, k, l);
                    return false
                })
            }
            $(l + ' .ycp div#ycp_youtube_channels' + k + ' span.vid-next').click(function() {
                g = c.nextPageToken;
                ycp_list(h, f, g, k, l);
                return false
            });
            $(l + ' .ycp div#ycp_youtube_channels' + k + ' div.play').each(function() {
                $(this).click(function() {
                    var a = $(this).attr("data-vvv"),
                        m = $(this).attr("data-img");
                    $(l + ' .ycp div#ycp_youtube_channels' + k + ' div').removeClass('vid-active');
                    $(this).addClass('vid-active');
                    if (j.autoplay == false) {
                        $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').html('<a href="#"></a>');
                        $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('background', 'url(' + m + ') no-repeat');
                        $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('-webkit-background-size', 'cover');
                        $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('-moz-background-size', 'cover');
                        $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('-o-background-size', 'cover');
                        $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').css('background-size', 'cover')
                    } else {
                        $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').html('<iframe src="//www.youtube.com/embed/' + a + '?rel=' + (j.related ? 1 : 0) + '&amp;autoplay=1" allowfullscreen="" frameborder="0" class="bingkay"></iframe>')
                    }
                    return false
                })
            });
            $(l + ' .ycp div.ycp_vid_play:eq(' + k + ')').click(function() {
                var a = $(l + ' .ycp div#ycp_youtube_channels' + k + ' div.play.vid-active').attr("data-vvv");
                $(this).html('<iframe src="//www.youtube.com/embed/' + a + '?rel=' + (j.related ? 1 : 0) + '&amp;autoplay=1" allowfullscreen="" frameborder="0" class="bingkay"></iframe>');
                return false
            })
        })
    }

    function ycp_part(c, i, d, e) {
        $.ajax({
            url: 'https://www.googleapis.com/youtube/v3/videos?id=' + c + '&key=' + j.apikey + '&part=contentDetails,snippet,statistics',
            dataType: 'json'
        }).done(function(a) {
            var b = a.items[0].contentDetails.duration,
                dataw = '',
                menit = '',
                detik = '';
            if (b.match(/M/g)) {
                dataw = b.split('M');
                menit = dataw[0].replace('PT', '');
                if (dataw[1] != '') {
                    detik = dataw[1].replace('S', '')
                } else {
                    detik = '00'
                }
            } else {
                dataw = b.split('PT');
                menit = '00';
                detik = dataw[1].replace('S', '')
            }
            $(e + ' .ycp div#ycp_youtube_channels' + d + ' span.tm' + i).html(menit + ':' + detik);
            $(e + ' .ycp div#ycp_youtube_channels' + d + ' span.by' + i).html('by ' + a.items[0].snippet.channelTitle);
            $(e + ' .ycp div#ycp_youtube_channels' + d + ' span.views' + i).html(addCommas(a.items[0].statistics.viewCount) + ' views');
            $(e + ' .ycp div#ycp_youtube_channels' + d + ' span.date' + i).html(_timeSince(new Date(a.items[0].snippet.publishedAt).getTime()))
        })
    }

    function _timeSince(a) {
        var s = Math.floor((new Date() - a) / 1000),
            i = Math.floor(s / 31536000);
        if (i > 1) {
            return i + " years ago"
        }
        i = Math.floor(s / 2592000);
        if (i > 1) {
            return i + " months ago"
        }
        i = Math.floor(s / 86400);
        if (i > 1) {
            return i + " days ago"
        }
        i = Math.floor(s / 3600);
        if (i > 1) {
            return i + " hours ago"
        }
        i = Math.floor(s / 60);
        if (i > 1) {
            return i + " minutes ago"
        }
        return Math.floor(s) + " seconds ago"
    }

    function addCommas(a) {
        a += '';
        x = a.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var b = /(\d+)(\d{3})/;
        while (b.test(x1)) {
            x1 = x1.replace(b, '$1' + ',' + '$2')
        }
        return x1 + x2
    }
}


Et pour finir le HTML ( vous pouvez ressortir votre clé et la collez dans le code à la place de COLLEZ ICI VOTRE CLE)
Vous pouvez le placer ou vous voulez voir le widget:
En page d'accueil, dans un widget du portail une page html etc..

Code:

<div id="testchanel" data-ycp_title="" data-ycp_channel="UCBzUgQOrb7az7AenB2yHNvw">
</div>
 <script type="text/javascript">
jQuery( document ).ready(function() {
     
    jQuery("#testchanel").ycp({
        apikey : 'COLLEZ ICI VOTRE CLE',
        playlist : 5,
        autoplay : false,
        related : false
    });
            
});
</script>

Logiquement cela devrait fonctionner

Dans le dernier code ceci

Code:

UCBzUgQOrb7az7AenB2yHNvw

correspond à votre chaine youtube.

Vous pouvez mettre le autoplay en

Code:

true

à la place de

Code:

false

pour une lecture auto.

Code:

 playlist : 5

correspond aux nombres de propositions apparaissant à droite dans le widget.

Code:

related : false

Si vous mettez true l'api youtube proposera des vidéos similaires aux vôtres il me semble..

Cdt.

[Mili]

Bonjour Adam,
Un grand merci, c'est exactement ce que je désire. Est-il possible que la fenêtre soit moins large ? Je vais suivre tous vos conseils en espérant y arriver. Je vous tiens au courant.
Je vous souhaite une excellente journée

[Adam_sfp]

Bonsoir Mili

Logiquement la taille s'adaptera en fonction de la largeur de votre page d'accueil ou par la largeur de votre widget de portail.
Vous devriez y arriver ;-)

Cdt.

[Mili]

Bonjour,

Merci pour les renseignements concernant la taille.
Je viens d'essayer de le mettre en place sur la page d'accueil mais je n'ai qu'une grande fenêtre noire et je ne trouve pas quelle est l'erreur. Merci de votre aide.

[Adam_sfp]

Bonsoir @Mili

Si vous avez obtenue une clé cela devrait fonctionner.
Quel code html avez vous mis?

Sinon il faudrait laisser le code en place même si ça ne fonctionne pas..c'est plus facile pour essayer de trouver l'erreur.
Cdt.

[Mili]

Bonjour,

Oui j'ai obtenu la cle, vos explications était détaillée et cela n'a pas posé problème. J'ai laissé le code en place afin que vous puissiez voir :
http://www.messagesrecus.com/forum
Le code que j'ai mis est :

<div data-ycp_channel="UCBzUgQOrb7az7AenB2yHNvw" data-ycp_title="" id="testchanel">

</div>
<script type="text/javascript">
jQuery( document ).ready(function() {

jQuery("#testchanel").ycp({
apikey : 'AIzaSyB1lSfIrFu1L_-yzj8bYyzRtBnTPSYIXtw',
playlist : 5,
autoplay : false,
related : false
});

});
</script>

[Adam_sfp]

Bonjour @Mili

Aie justement apparemment c'est la clé qui est pas bonne ,-)

Je ne sais pas si vous avez vu mais dans la démo plus haut en cliquant en haut à droite sur Edit in JSFiddle.
Vous avez accès au code composé de 3 parties
HTML en haut à gauche
Juste en dessous le javascript
Et en haut à droite le CSS

C'est pratique pour tester ou faire des codes avant de les mettre sur votre forum.
Et quand on teste avec votre clé cela ne fonctionne pas. (j'ai l'impression qu'il y a un caractère en trop dans la clé j'ai aussi essayé en enlevant le

Code:

-

qui me paraissait en trop mais sans résultat.
Essayez en supprimant et en générant une nouvelle clé sur google developer ( vous n'avais plus besoin de faire toutes les étapes.)

Et ensuite testez sur ce fiddle
http://fiddle.jshell.net/adam_sfp/vzpyo595/4/

Pour tester vous changer le code et vous cliquez sur RUN pour voir le résultat.
Vous pouvez aussi sauvegardez même si vous n'avez pas de compte en cliquant update.

*Vous pouvez d'ailleurs tester avec le code de ce fiddle et ma clé sur votre forum voir si cela fonctionne.
Cela confirmera que cela vient de la clé.

Mais on est pas loin ça va fonctionner ;-)

Cdt.

[Mili]

J'ai refait une clé API mais je n'ai pas su tester néanmoins il semble que cela fonctionne.
Un très grand merci pour votre patience, clarté, rapidité et efficacité, je vous souhaite une merveilleuse fin d'année.