Bonjour à vous tous
J’ai réalisé un site internet pour mon club de sport, et des vidéos sont mises en ligne sur différentes pages du site
Mon problème est que sur le site je n’ai pas accès au bouton plein écran du lecteur de vidéos qui est grisé alors que si j’ouvre une page depuis mon ordinateur, le navigateur ouvre la page et j’ai accès au bouton plein écran
Par dépit j’ai programmé un plein écran suite à un clique avec un code JS et la même punition : la fonction marche en local mais pas en ligne
Si quelqu’un a une idée pour solutionner mon problème, je suis preneur
URL d’une page avec vidéos : https://www.fcba-hericourt.com/le-club-et-la-compétition/vidéos-k1
Code HTML pour les deux premières vidéos :
<h1>Enzo casque rouge</h1>
<div id="Global">
<div id="videos">
<video controls height="185"preload="none" onClick="twPleinEcran(this);" >
<source src="https://drive.google.com/uc?id=18Bxp-2aGRJNXPtOuHw40FRAeuS94FY6P" type="video/mp4"/>
</video>
<p> Demi finale </p>
</div>
<div id="videos">
<video controls height="185"preload="none" onClick="twPleinEcran(this);" >
<source src="https://drive.google.com/uc?id=1bFhFcXzSn1cC-1DPM8AIfi2y__cH5m3k" type="video/mp4"/>
</video>
<p> Finale </p>
</div>
</div>
Code CSS :
video {

width: 100%; /*occupe 100% des 30% de #vidéos */
#videos { /*Positionnement de chaque vidéo */

display: inline-block;

vertical-align: top;

width:30%; /*occupe X% de la ligne */

margin-right: 20px;/*Marge entre chaque vidéo */

font-size: 0.8em; /*taille caractères du texte sous vidéos */

color: #000000; /*couleur texte*/
Code JS :
function twPleinEcran(_element) {

var monElement = _element||document.documentElement;

if (document.mozFullScreenEnabled) {

if (!document.mozFullScreenElement) {

monElement.mozRequestFullScreen();

} else {

document.mozCancelFullScreen();

}

}

if (document.fullscreenElement) {

if (!document.fullscreenElement) {

monElement.requestFullscreen();

} else {

document.exitFullscreen();

}

}

if (document.webkitFullscreenEnabled) {

if (!document.webkitFullscreenElement) {

monElement.webkitRequestFullscreen();

} else {

document.webkitExitFullscreen();

}

}

if (document.msFullscreenEnabled) {

if (!document.msFullscreenElement) {

monElement.msRequestFullscreen();

} else {

document.msExitFullscreen();

}

}

}

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

Bonjour, passez votre code au validateur pour voir et corriger vos erreurs. => https://validator.w3.org/  (il faut TOUTES les corriger)

Un identifiant est unique dans le document, vous ne pouvez avoir plusieurs id="Global" id="video".