WordPress – Deaktivieren und verbergen Sie alle Steuerelemente auf dem Video

Wie deaktiviere und verstecke ich alle Steuerelemente in WordPress 4.6.1-Videos?

Folgen Sie meinem tatsächlichen Code in einer WordPress-Seite:

Hallo, Sie müssen die Inline-Stile überschreiben, die auf .mejs-controls div für diesen Video-Shortcode angewendet werden. Du kannst:

.mejs-controls {
  display: none !important;
  visibility: hidden !important;
  }

Diese Steuerelemente werden normalerweise nur beim Hover angezeigt, es sei denn, Sie sagen ihnen etwas anderes. Ich würde fragen, warum Sie die Steuerelemente deaktivieren möchten. Wenn Sie dem Benutzer diese Fähigkeit entziehen, kann dies dazu führen, dass er mit dieser Einschränkung frustriert ist.

Ich habe hier in diesem Beitrag etwas mehr Informationen gefunden: https://wordpress.stackexchange.com/questions/130402/hide-default-video-shortcode-controls-on-pageload

Die Nicht-CSS-Methode besteht darin, Ihrer Shortcode-Ausgabe einen Filter hinzuzufügen. Legen Sie dies in Ihre functions.php Theme-Datei:

add_filter( 'wp_video_shortcode', function( $output ) {
    $output = str_replace( 'controls="controls"', '', $output );
    return $output;
} );

Was ersetzt die controls="controls" -Attribut in der Zeichenfolge mit einem Leerzeichen, um die Funktion auszulassen.

Ich denke nicht, dass es eine schlechte UX ist, wenn es sich um Hintergrundvideos oder eine kleine 2-3-Sekunden-Schleife handelt, da HTML5-Videos GIFs ersetzen und jetzt Telefon-/Tablet-Autoplay-Unterstützung haben, wenn sie stummgeschaltet sind.

Dies könnte auch nützlich sein, es wird alle Steuerelemente ausblenden, bis Sie mit der Maus über das Video fahren:

.mejs-controls {
  opacity: 0!important;
  transition: all 0.5s ease;
}

.mejs-container:hover .mejs-controls {
  opacity: 1!important;
}

.mejs-overlay-button{
  display: none !important;
  visibility: hidden !important;
}