Podcast Player 4 klappt auf Smartphone immer ein

#1

Hallo zusammen,

ich verwende auf meiner Homepage den Podcast Player 4, aber sobald ich mit meinem Smartphone draufgehe und scrolle, klappt der Player immer ein, Audio läuft aber weiter aber ich kann nichts mehr bedienen. Wenn ich die Seite akutalisiere, erscheint der Player wieder bis ich erneut scrolle.

zu testen hier http://hoer-brille.de/episoden/

Vielen Dank

#2

Es gibt unter bestimmten Gegebenheiten (bei bestimmten Themes) ein Problem das der Player seine Größe nicht richtig berechnen kann, dann setzt er die Höhe 0 und ist damit nicht mehr sichtbar. Ich konnte bisher noch keinen konkreten Grund finden, werde ich mir aber genauer anschauen.

1 Like
#3

Vielen Dank für die Anwort,
Erstmal ist er ja sichtbar, erst wenn ich Scrolle mit dem Smartphone setzt er die Höhe auf 0.
Er macht es auch gelegentlich über den PC habe ich festgestellt, jedoch kann ich das nicht reproduzieren.

Wäre schade, da der Player sehr schön ist und die anderen viel zu breit. Nutze jetzt erstmal bis es eine Lösung gibt den Podlove Player 3

#4

Hi,
ich habe das gleiche Problem. Tritt auf iOS und Androidgeräten auf. Der Player wird immer überlagert. Ich glaube es liegt am Twenty Twenty Wordpress Theme. Denn unter dem Twenty Nineteen konnte ich es nicht reproduzieren.

#5

Kann ich bestätigen, alle Fälle die ich kenne nutzen Twenty Twenty.

#6

Liebe Entwickler, kommt da noch ein update?

#7

Fände ich auch mega. :grinning:

#8

Ich konnte bisher noch kein Testsystem aufsetzen um herauszufinden was in TwentyTwenty da klemmt.

Webplayer verschwindet mobil beim Scrollen/auf Desktop bei neuer Seitengröße
#9

Da sich die Anfragen hier häufen ein kleiner Einblick was das Problem ist. Das 2020 Theme beinhaltet eine Javascript Funktion die versucht videos zu skalieren. Dafür werden alle iframes, objects oder videos manipuliert:

function() {
		document.querySelectorAll( 'iframe, object, video' ).forEach( function( video ) {
			var ratio, iTargetWidth,
				container = video.parentNode;

			// Skip videos we want to ignore
			if ( video.classList.contains( 'intrinsic-ignore' ) || video.parentNode.classList.contains( 'intrinsic-ignore' ) ) {
				return true;
			}

			if ( ! video.dataset.origwidth ) {
				// Get the video element proportions
				video.setAttribute( 'data-origwidth', video.width );
				video.setAttribute( 'data-origheight', video.height );
			}

			iTargetWidth = container.offsetWidth;

			// Get ratio from proportions
			ratio = iTargetWidth / video.dataset.origwidth;

			// Scale based on ratio, thus retaining proportions
			video.style.width = iTargetWidth + 'px';
			video.style.height = ( video.dataset.origheight * ratio ) + 'px';
		} );
	}

Das ist natürlich auf Theme Ebene wirklich die Schuss ins Knie Methode …

Die richtige Möglichkeit damit umzugehen ist es den Webplayer Container die CSS Klasse intrinsic-ignore zu geben. Das erfordert aber ein Release des Publishers von @ericteubert.

Kurzfristig könnt ihr im Theme Editor die Funktion auch händisch entfernen (auch keine schöne Variante) :confused: