J'ai suivi une procédure à suivre sur YouTube pour un formulaire simple Popup modal, puis remplacé le code de formulaire avec l'encreur Iframe YouTube. Le gars utilisait Atom.io, donc j'ai utilisé cela, et tout fonctionne, à l'exception de l'audio continue de jouer.
Je suis très nouveau et apprenant des termes comme je vais. Dans le code JS, le guide a commencé les lignes avec le mot "document", mais sur Stackoverflow Les personnes utilisent un signe $, puis directement sur la fonction (). Cette question a été répondu à plusieurs fois, mais je ne sais pas comment intégrer ce code dans ce que j'ai. Je comprends que la lecture vidéo est simplement en pause.
par exemple, Arrêtez la vidéo lorsque Modal est fermé ressemble exactement à ce dont j'ai besoin, sauf que je ne peux pas penser à la fusion de mon fichier. Je pourrais simplement utiliser leur code directement, puis il y a Var et des éléments qui n'étaient pas expliqués dans la vidéo.
J'ai essayé d'ajouter Mais cela vient de le briser. J'utilise W3schools pour obtenir de l'aide avec le code. html CSS serait-il plus facile d'intégrer la vidéo à une page vierge et à montrer que dans le modal? Ce sera plus de travail car le site grandit, mais au moins c'est quelque chose pour l'instant: /. Ou si les JS ont juste changé la cible en rien en quelque sorte.
3 Réponses :
Je recommanderais faire quelque chose comme ceci:
alors vous pouvez faire quelque chose comme: var vidéo = document.createelement ("Vidéo");
video.settattribute ("src", "nomoffile.ogg"); vidéo.Pause ();
video.currenttime = 0;
Je vais essayer cela aussi.
Avez-vous essayé d'utiliser innerhtml?
Par exemple: P>
<button type="button" name="button" id="button">Click</button>
<!-- Modal Section -->
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<div id="video">
<iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById("button").addEventListener("click", function() {
document.querySelector(".bg-modal").style.display = "flex";
document.getElementById("video").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>';
});
document.querySelector(".close").addEventListener("click", function() {
document.getElementById("video").innerHTML = '';
document.querySelector(".bg-modal").style.display = "none";
});
</script>
Ah! C'est presque ce que je cherchais! : D Le premier ensemble de code supprime le bouton de fermeture et enfreint la vignette pour ouvrir la vidéo. Alors je l'ai placé sous la seconde et ça marche! Sauf la deuxième fois que la vignette est cliquée, le bouton de fermeture est parti .. Je pense que je connais la cause et c'est la direction que je cherchais :). Je ferai rapport une fois que tout va bien.
OUI! Votre code effacaudait tous les conteneurs et CSS ne pouvait pas suivre, donc j'ai fait une nouvelle classe DIV appelée TheVideo directement sur le lien vidéo, puis utilisée uniquement innerhtml pour gâcher ce conteneur. Rien d'autre n'est touché, le lien vidéo est supprimé essentiellement, puis remplacé.
Non quoi? Lorsque je l'ajoutez au site Web, le caractère + pour la fermeture de la fenêtre, et la vidéo est affichée sur la page au lieu de l'intérieur du modal> _ <
Pouvez-vous partager votre code? Je suppose que cela se trouve à l'intérieur d'un peu de droite modal?
C'est ce que j'utilise maintenant. Articles qui pourrait vous intéresser : Lang-JS Document.getelementByID ("Bouton"). AddeventListener ("Cliquez sur", fonction () {document.Quiseryselector (". BG-MODAL"). Style.display = "Flex";}); Document.QuerySelector (". Fermer"). AddEventListener ("Cliquez sur", fonction () {document.Quiseryselector (". BG-MODAL"). Style.display = "Aucun"; Document.Quiseryselector (". Thevideo"). innerhtml = ""; document.QuerySelector (". TheVideo"). innerhtml = '
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
document.Quiseryselector (". BG-MODAL"). attr = "src", "" "; est une mauvaise syntaxe pour deux raisons. Une fois que la virgule est hors de la place et deux, vous avez trois citations ensemble, qui est analysé comme une chaîne interminée. Essayezdocument.Quiseryselector ('. BG-MODAL'). setattribute ("src", ")Celui-ci joue encore. J'ai commenté la ligne de fermeture afin que ce soit la seule commande en cliquant sur la vidéo et la vidéo n'était pas affectée.