Video: controls auch bei hover deaktivieren

  • Gelöst kastenwirbel

    (@kastenwirbel)


    vor 3 Jahren, 4 Monaten

    Guten Tag,

    ich möchte kurze Videoausschnitte als Link zu verschiedenen Seiten nutzen.
    Wenn ich mit der Maus über das Video fahre, werden die Controls eingeblendet.
    Wie kann ich diesen Effekt deaktivieren?
    Ich habe versucht:
    Controls=
    „untrue“
    „false“
    „nocontrols“
    „0“
    0
    „nocontrols“
    „no“
    Klappt alles nicht.
    Hat jemand eine Idee?
    Danke

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 3 Jahren, 4 Monaten

    Hallo,
    das kannst du über einen HTML-Block erreichen:

    <div class="kleines_video">
<h2>Kleiner Film</h2>
<video src="http://example.com/wp-content/uploads/2020/05/film.mp4" autoplay="" muted="" loop="" controls="">  
</video>
</div>

    Ein Beispiel findest du auf der folgenden Webseite. Das Video oben habe ich in der genannten Art und das Video unten über den Video-Block eingebunden.
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 4 Monaten

    Das Youtube-Video wird mit JavaScript eingebettet, das aber nicht so leicht zu beseitigen ist. Youtube gibt zwar auf der Hilfeseite einige Player-Parameter an, die bei eingebetteten iFrames verwendet werden können, aber das hilft hier auch nicht so richtig weiter.

    Schauen wir uns an, was das JavaScript bei Mauszeigerkontakt macht, sehen wir dass aus dem Abschnitt

    <div tabindex="0" class="plyr plyr--full-ui plyr--video plyr--html5 plyr--fullscreen-enabled plyr--playing plyr--hide-controls">

    die CSS-Klasse plyr--hide-controls gelöscht wird.
    Diese Klasse sorgt aber dafür, dass das Overlay mit der Videosteuerung transparent dargestellt wird:

    .plyr--video.plyr--hide-controls .plyr__controls {
 opacity:0;
 pointer-events:none;
 transform:translateY(100%)
}

    Ein Workaround wäre nun, dass die Steuerung bei Mauszeigerkontakt einfach ebenfalls nicht angezeigt wird, was wir durch eine weitere CSS-Regel erreichen:

    .plyr--video .plyr__controls {
 opacity:0;
}

    Bleibt dann nur noch der unschöne Abspiel-Button, der beim Anklicken des Videos erscheint. Der lässt sich aber einfach mit folgender CSS-Regel entfernen:

    .plyr--full-ui.plyr--video .plyr__control--overlaid {
 display:none;
}

    Beide CSS-Regeln kannst du in einem Child-Theme in der style.css oder, wenn kein Child-Theme verwendet wird, im Customizer unter Zusätzliches CSS einfügen.

    Nachtrag: Unsere Antworten haben sich mal wieder überschnitten und die Antwort von Hans-Gerd ist (da kein Youtube-Video eingebunden wird) so verblüffend einfach, dass ich sie auf jeden Fall vorziehen würde. Also … was Hans-Gerd sagt. 👍🏻

    • Diese Antwort wurde geändert vor 3 Jahren, 4 Monaten von Bego Mario Garde. Grund: Nachtrag
    Thread-Starter kastenwirbel

    (@kastenwirbel)

    vor 3 Jahren, 4 Monaten

    Fantastisch!
    Vielen Dank!

    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 4 Monaten

    Noch fantastischer: als „gelöst“ markiert. 😀

    Thread-Starter kastenwirbel

    (@kastenwirbel)

    vor 3 Jahren, 4 Monaten

    Jetzt habe ich aber noch ein Problem.
    Das autoplay funktioniert nur so lange, wie ich muted=““ stehen lasse.
    Sobald ich es entferne, geht es nicht mehr.
    Ton kann ich nur hören, wenn ich die controls drin lasse und entwewder den durch muted=““ abgeschalteten Ton einschalte.
    Wenn muted=““ entfernt ist, muss ich das Video über die controls starten.

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 3 Jahren, 4 Monaten

    Hallo,
    sonst teste mal das Plugin Flowplayer. Wir haben das Plugin bei einem Projekt eingesetzt, wobei ich nicht mehr weiß, warum wir damals den HTML-Code nicht einsetzen konnten. Möglicherweise lag es tatsächlich an diesem Problem.
    Viele Grüße
    Hans-Gerd

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)
  • Das Thema „Video: controls auch bei hover deaktivieren“ ist für neue Antworten geschlossen.