Script gratuit pour galerie HTML Youtube

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par G-mi, 17 Mai 2017.

  1. G-mi

    G-mi Nouveau WRInaute

    Inscrit:
    10 Avril 2017
    Messages:
    44
    J'aime reçus:
    0
    [​IMG]
    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:
    /***********************************************
    * 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:
    .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:
    
    <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>
    [​IMG]
     
  2. klp

    klp WRInaute discret

    Inscrit:
    19 Octobre 2016
    Messages:
    154
    J'aime reçus:
    1
  3. G-mi

    G-mi Nouveau WRInaute

    Inscrit:
    10 Avril 2017
    Messages:
    44
    J'aime reçus:
    0
    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
     
  4. Madrileño

    Madrileño Madribot

    Inscrit:
    7 Juillet 2004
    Messages:
    37 803
    J'aime reçus:
    14
    Bonjour,

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

    Cordialement.
     
  5. G-mi

    G-mi Nouveau WRInaute

    Inscrit:
    10 Avril 2017
    Messages:
    44
    J'aime reçus:
    0
    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
     
  6. Schwarzer Stern

    Schwarzer Stern WRInaute impliqué

    Inscrit:
    16 Mai 2010
    Messages:
    753
    J'aime reçus:
    0
    Salut,
    merci pour le partage, c'est possible de spécifier comme paramètre une recherche (par exemple "search_query=françois+l%27embrouille") et d'avoir un certain nombre des vidéos en résultat qui apparaîtraient ? ça m'intéressait pas mal !
    Merci encore
     
  7. niap

    niap WRInaute discret

    Inscrit:
    17 Octobre 2009
    Messages:
    139
    J'aime reçus:
    0