Script gratuit pour galerie HTML Youtube

Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics


G-mi
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 44
Enregistré le: 10 Avr 2017

Script gratuit pour galerie HTML Youtube

Message le Mer Mai 17, 2017 16:10

Image
Hello a tout le monde,
vite fait ,
un petit script en 3 fichiers ,
tout simple à gérer pour afficher en HTML une galerie Vidéo YouTube en HTML
(Fichier CSS - Fichier JS - ZIP Code Black template - Exemple de Galerie)

Pratiquer le script :

Le Js contiens playerVars: , ce qui vous donne des paramètres pour votre lecteur

La gestion de vos vidéos se paramètre par le HTML et la boucle <script></script> ou est contenu :
playlist: [ // list of youtube video IDs. It's the last segment within a shareable Youtube URL

Tout vite fait en quelques clics une jolie galerie HTML pour afficher vos vidéos YouTube a volonté

Le fichier JS
ddvideogallery.js
Code: Tout sélectionner
/***********************************************
* Youtube Video Gallery script (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Requires: JQuery 1.5+
* Last modified: April 15th, 16 v1.2 to fix iOS devices not loading videos
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

var youtubeapidfd = $.Deferred()

function onYouTubeIframeAPIReady(){
   youtubeapidfd.resolve()
}

var ddyoutubeGallery = (function($){
   
   var youtubethumbnailsurl = 'http://img.youtube.com/vi/VIDEO-ID/default.jpg'
   var youtubescreenshotsurl = 'http://img.youtube.com/vi/VIDEO-ID/mqdefault.jpg'
   var idevice = /ipad|iphone|ipod/i.test(navigator.userAgent)

   function ddyoutubeGallery(setting){
      var thisinst = this
      this.$slider = $('#' + setting.sliderid)
      this.$videowrapper = this.$slider.find('.videoWrapper:eq(0)')
      this.$nav = this.$slider.find('.videoNav:eq(0)')
      this.totalvids = setting.playlist.length
      this.currentvid = setting.selected || 0
      this.$navbelt
      this.setting = setting
      var tempdiv = $('<div />').appendTo( this.$videowrapper ) // temporary DIV container to be replaced with Youtube IFRAME
     var tag = document.createElement('script')
     tag.src = "https://www.youtube.com/iframe_api"
     var firstScriptTag = document.getElementsByTagName('script')[0]
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
      youtubeapidfd.then(function(){
        thisinst.player = new YT.Player(tempdiv.get(0), {
            playerVars: {
               controls: 1,
showinfo:0,
rel:0,
modestbranding:1,
controls:0,
iv_load_policy:3,
fs:0,
               playlist:

setting.playlist.join(',')
            },
          events: {
            'onReady': function(e){
                  thisinst.populatenav(setting.playlist)
                  if (setting.autoplay && !idevice){
                     thisinst.player.playVideoAt( thisinst.currentvid )
                  }
               },
            'onStateChange': function(e){
                  if (setting.autoplay && e.data == 5 && !idevice){ // if auto play video and playlist is cued and not iOS devices. See https://developers.google.com/youtube/iframe_api_reference for e.data details
                     thisinst.player.playVideoAt( thisinst.currentvid )
                  }
                  if (setting.autocycle && e.data == 0 && !idevice){ // if auto cycle && current video finished playing
                     var nextvid = (thisinst.currentvid < thisinst.totalvids-1)? thisinst.currentvid + 1 : 0
                     thisinst._scrolltothumb( nextvid )
                     thisinst.player.playVideoAt( nextvid )
                  }
               }
          }
        })
      })
   }

   ddyoutubeGallery.prototype = {


      _scrolltothumb(index){
         var indexnum = parseInt(index)
         var selectedvid = (indexnum < 0)? 0 : (indexnum > this.totalvids-1)? this.totalvids-1 : indexnum
         var $imgs = this.$nav.find('img')
         var $targetimg = $imgs.eq(selectedvid)
         var rightpos = $targetimg.position().left
         if (selectedvid <= this.currentvid){ // if clicking on thumbnail to the left of current selected thumbnail
            var navwidth = this.$nav.width()
            var imgwidth = $targetimg.width()
            var imagemargin = parseInt($targetimg.css('marginRight')) + parseInt($targetimg.parent().css('marginRight'))
            rightpos -= navwidth - imgwidth - imagemargin
         }
         this.$navbelt.animate({scrollLeft: rightpos}, 400)
         $imgs.eq(this.currentvid).removeClass('selected').end()
            .eq(selectedvid).addClass('selected')
         this.currentvid = selectedvid
      },

      populatenav(playlist){
         var thisinst = this
         var navhtml = '<ul>\n'
         for (var i=0; i<playlist.length; i++){
            navhtml += '<li><img src="' + youtubethumbnailsurl.replace('VIDEO-ID', playlist[i]) + '" data-videoindex="' + i +'"/></li>\n'
         }
         navhtml += '</ul>\n'
         this.$nav.empty().html( navhtml )
         this.$navbelt = this.$nav.find('ul:eq(0)')
         this.$nav.off('.selectvideos').on('click.selectvideos', function(e){
            if (e.target.tagName == 'IMG'){
               var $target = $(e.target)
               var selectedvid = parseInt($target.data('videoindex'))
               thisinst._scrolltothumb( selectedvid )
               if (typeof thisinst.player != "undefined"){
                  if (idevice){
                     thisinst.player.cueVideoById( thisinst.setting.playlist[ selectedvid ] )
                  }
                  else{
                     thisinst.player.playVideoAt( selectedvid )
                  }
               }
               this.currentvid = parseInt($target.data('videoindex'))
            }
         })
         this._scrolltothumb( this.currentvid )
      }
   }

   return ddyoutubeGallery

})(jQuery);


Le fichier CSS
ddvideogallery.css
Code: Tout sélectionner
.ddvideoGallery{
   width: 100%; /* width of DD Youtube Slider. Height auto determined using 16:9 ratio */
}

.ddvideoGallery *{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


.videoWrapper{
   position: relative;
   padding-bottom: 56.25%; /* 16:9 ratio. See https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
   padding-top: 25px;
   height: 0;
}


.videoWrapper iframe{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
}


.videoNav{
   width: 100%;
   position: relative;
   overflow: hidden;
   background: #eee; /* background of navigation strip */
}

.videoNav ul{
   list-style: none;
   margin: 5px 0;
   position: relative;
   width: auto;
   padding: 20px;
   overflow: auto;
   white-space: nowrap;
   text-align: center;
}

.videoNav ul li{
   display: inline;
   margin-right: 5px; /* margin between thumbnails */
}

.videoNav ul li img{
   max-width: 140px;
   width: 20%;
   height: auto;
   position: relative;
   border: 4px solid transparent;
   cursor: pointer;
   transition: all .5s;
}

.videoNav ul li img:hover, .videoNav ul li img.selected{
   border: 4px solid #e947d0;
}


Le fichier HTML
Code: Tout sélectionner

<link rel="stylesheet" href="ddvideogallery.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="ddvideogallery.js">

/***********************************************
* Youtube Video Gallery script - (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<div id="videojukebox" class="ddvideoGallery">
   <div class="videoWrapper"></div>
   <div class="videoNav"></div>
</div>




<script>
<!--
// initialize video gallery after markup above

var myvideogallery = new ddyoutubeGallery({
   sliderid: 'videojukebox',
   selected: 0, // default selected video within playlist (0=1st, 1=2nd etc)
   autoplay: 1, // 0 to disable auto play, 1 to enable
   autocycle: 1, // 0 to disable auto cycle, 1 to auto cycle and play each video automatically
showinfo:0,
rel:0,
modestbranding:1,

   playlist: [ // list of youtube video IDs. It's the last segment within a shareable Youtube URL
      'L5IeTUogUHA',
      '9kRQ7zVMAwk',
      'WVY_ZXu2Ksk',
      'XZqrt-wnWHE',
      'RONCyV80IpA',
      'ZSMX4-H-DE4',
'zfsoZ-elsLY',
'DIRLcLXVLfA',
'xPZ5AJCXlh0',
'13ffSfcq_s4',
'QTaxgLpBvvE',
'zFsaqWR6Fq4',
'9IKq7rA-c1U',
'kODDG73vLSw',
'Fn-oM7P13r4',
'AYWY2sarNrA',
'FmybwQE4NTc',
'navJGl_bqsY',
'wSOdDOAXRu0',
'c-7o6C35I6c',
'JHFn_3KESTM',
'8E0zqH8zcg4',
'3UwU_Ogz7wo',
'JHqDvFtu5Y0',
'_aZjkRjQmsE',
'lQsylzRSud4',
'E85w-xHUHKM',
'Hr6W8Ji2sjA',
      'Y62CSoZUf_o'
   ]
})
//->
</script>


Image
Modifié en dernier par G-mi le Mer Mai 17, 2017 16:50, modifié 2 fois.


klp
WRInaute discret
WRInaute discret
 
Messages: 107
Enregistré le: 19 Oct 2016

Re: Script gratuit pour galerie HTML Youtube

Message le Mer Mai 17, 2017 16:43

Bonjour,
Merci pour le partage mais ça ne fonctionne à priori pas https://jsfiddle.net/ac5ytfuh/

Cordialement.


G-mi
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 44
Enregistré le: 10 Avr 2017

Re: Script gratuit pour galerie HTML Youtube

Message le Mer Mai 17, 2017 16:48

l'article source de l'applicatuion : http://www.dynamicdrive.com/dynamicindex17/youtube-video-gallery.htm
oui j'ai vu l'erreur une balise script dans le fichier HTML , je dois fermer le script avant la DIV JUKEBOX, je corrige mon tread

Mega ton lien , enfin un studio HTML en ligne qui marche bien

Voila tread corrigé, je mets les zip a jour
merci d'avoir vu et contrôlé

Tout à été recontrôle , normalement c'est OK


Madrileño
Madrileño
Madrileño
 
Messages: 37560
Enregistré le: 7 Juil 2004

Re: Script gratuit pour galerie HTML Youtube

Message le Mer Mai 17, 2017 19:32

Bonjour,

Merci G-mi, la communauté devrait apprécier ton partage.

Cordialement.


G-mi
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 44
Enregistré le: 10 Avr 2017

Re: Script gratuit pour galerie HTML Youtube

Message le Dim Mai 21, 2017 14:24

il y en aura d'autres,
a la fin utiliser le forum pour bookmarker les scripts que je ne veut pas perdre sur le net
Conservé sur le forum


Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :