Vidéo dans modal par Maxime Alchimie Dev - page 1

Bonjour j'aimerai savoir comment avoir une video par image sur ma mosaique

<!DOCTYPE html>
<html>
<head>
	<title>Mosaique</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="refresh" content="">
</head>
	
                                         <!-- LES CHANNELS -->

<body>
  	<div class="wrapper"></div>
  	<div id="modal" class="w3-modal">
			<span class="w3-button w3-hover-red w3-xlarge w3-display-topright" onclick="modal.style.display='none'">×</span>
			<!-- Le contenu de la modal -->
  			<div id="videoid" class="w3-modal-content w3-animate-zoom">
    			<iframe id="video" width="560" height="560" src="https://www.youtube.com/embed/a-M_5rGhPdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    		</div>
    	</div>	

<script src="javascript/script.js"></script>
<script src="javascript/mosaic_config.json"></script>
</body>
</html>

* {
box-sizing: border-box;
}
html, body{
padding:0;
margin:0;
width: 100%;
}
                                              /* --TOUTE LA PARTIE CSS-- */
.wrapper {
display:grid;
grid-template-columns: 0fr 0fr 0fr 0fr;
cursor: pointer;
}


#video {
display:block;
width: 100%;
position: relative;
}
.img-wrapper {
position:relative;
}

/*-- Nom des chaines par images --*/
.text {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
text-align:center;
display: block;
position:absolute;
left: 5%;
bottom: 72%;
font-size: 225%;
font-family: fantasy;
letter-spacing: 5px;

}

/*-- La modal --*/
.w3-modal {
width: 100%;
padding-top: 10%;
background-color: rgba(0,0,0,0.4);

}

.video {
width: 475.75px;
height: 251px;
}








          

                                                        /*-- LE RESPONSIVE-- */

@media all and (min-width:3412px) {
.wrapper {
grid-template-columns: repeat(6, 0fr);
}
}
@media all and (min-width:2864px) {
.wrapper {
grid-template-columns: repeat(5, 0fr);
}
}
@media all and (min-width:2393px) {
.wrapper {
grid-template-columns: repeat(6, 0fr);
}
}
@media all and (max-width:3426px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2835px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2358px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:1915px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr; 
}
}
@media all and (max-width:1438px) {
.wrapper {          
grid-template-columns: 0fr 0fr; 
}
}
@media all and (max-width:964px) {
.wrapper {
grid-template-columns: 0fr; 
}
}

		//-- Fonction quand je clics sur une image sa m'ouvre une modal --//
		function onClick(element) {
	  		document.getElementById("videoid").src = element.src;
	  		document.getElementById("modal").style.display = "block";
	  		
		}


		
		//-- Fonction quand je clics juste autour de ma modal ma modal se ferme --//
		window.onclick = function(event) {
  			if (event.target == modal) {
    		modal.style.display = "none";
  			}
		}

		// Cibler l'élément parent qui va contenir la liste d'élément.
var elWrapper = document.getElementsByClassName('wrapper')[0],

	


	channels = [{
		class: 'cars_and_stars',
		label: 'CARS & STARS TV',				
		src: 'http://live.tevolution.tv/monitor/PNG/cars_and_stars/status.png' //chemin de l'image
		
	}, {
		class: 'ab1',
		label: 'AB1' ,
		src: 'http://live.tevolution.tv/monitor/PNG/ab1/status.png',
	}, {
		class: 'ab3',
		label: 'AB3' ,
		src: 'http://live.tevolution.tv/monitor/PNG/ab3/status.png'
	}, {
		class: 'ab_moteurs',
		label: 'AB MOTEURS' ,
		src: 'http://live.tevolution.tv/monitor/PNG/ab_moteurs/status.png'
	}, {
		class: 'abxplore' ,
		label: 'ABXPLORE' ,
		src: 'http://live.tevolution.tv/monitor/PNG/abxplore/status.png'
	}, {
		class: 'action' ,
		label: 'ACTION' ,
		src: 'http://live.tevolution.tv/monitor/PNG/action/status.png'
	}, {
		class: 'animaux' ,
		label: 'ANIMAUX' ,
		src: 'http://live.tevolution.tv/monitor/PNG/animaux/status.png'
	}, {
		class: 'auto_motor_sport' ,
		label: 'AUTO MOTOR SPORT' ,
		src: 'http://live.tevolution.tv/monitor/PNG/auto_motor_sport/status.png'
	}, {
		class: 'bibel' ,								
		label: 'BIBEL' ,
		src: 'http://live.tevolution.tv/monitor/PNG/bibel/status.png'
	}, {
    	class: 'bon_gusto' ,
    	label: 'BON GUSTO' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/bon_gusto/status.png'
    }, {
    	class: 'chasse_peche' ,
    	label: 'CHASSE PECHE' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/chasse_peche/status.png'
    }, {
    	class: 'classica' ,
    	label: 'CLASSICA' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/classica/status.png'
    }, {
    	class: 'clubbing' ,
    	label: 'CLUBBING' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/clubbing/status.png'
    }, {
   		class: 'crime_district' ,
    	label: 'CRIME DISCTRICT' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/crime_district/status.png'
    }, {
    	class: 'djazz' ,
    	label: 'DJAZZ' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/djazz/status.png'
    }, {
    	class: 'docubox' ,
    	label: 'DOCUBOX' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/docubox/status.png'
    }, {
    	class: 'english_club' ,
   		label: 'ENGLISH CLUB' ,
   		src: 'http://live.tevolution.tv/monitor/PNG/english_club/status.png'
   	}, {
    	class: 'eotv' ,
    	label: 'EOTV' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/eotv/status.png'
    }, {
    	class: 'euronews_de' ,
    	label: 'EURONEWS DE' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/euronews_de/status.png'
    }, {
    	class: 'fashionbox' ,
    	label: 'FASHION BOX' ,
    	src: 'http://live.tevolution.tv/monitor/PNG/fashionbox/status.png'


	}],

	// Déclaration de variable
	item;

// Pour chaque élément dans `channels`
channels.forEach(function (data) {

	// Créer un élément
	item = document.createElement("div");

	// Créer des attributs à cet élément
	item.id = 'channel-live';
	item.classList.add('img-wrapper');

	// Remplir l'élément avec du contenu HTML
	item.innerHTML = '<img id="channel-' + data.class + '-img"'
		+ ' class="video"'
		+ ' src="' + data.src + '"'
		+ ' onload="this.onload = null; this.src = getImages(\'' + data.class + '\');"'
		+ ' onclick="onClick(this)" class="w3-hover-opacity">'
		+ '<span class="text">' + data.label + '</span>';
		

	// Insérer l'élément dans la cible parent
	elWrapper.appendChild(item);
});

Pouvez-vous m'aider

Vidéo dans modal

Vidéo dans modal

Supprimer

Modérer

Signaler le message aux modérateurs