youtube-Inhalte auf mobile nicht anklickbar

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

youtube-Inhalte auf mobile nicht anklickbar

Post by update »

Ich habe jetzt verschiedene Ansätze ausprobiert, um Filme, Musikstücke von youtube einzubinden und darzustellen. So richtig zufrieden bin ich aber nicht mit den Ergebnissen. Während sich das Gezeigte auf einem Desktop vernünftig präsentiert, lässt sich der selbe Inhalt auf einem Mobile nicht anklicken / antatschen. Das ist doof und verführt mich zu den Fragen,
  • was ich wohl falsch mache
  • was ich besser machen könnte
  • ob es Alternativen gibt
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by pepe »

Kann man sich das Problem irgendwo "live" ansehen???
Old Boy
Posts: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by Old Boy »

Also ich habe mir ein HTML-Template geschrieben, damit funktioniert das wunderbar,
selbst bei "responsive" Layout:

responsive-video.tmpl

Code: Select all

<!-- CSS:
        .responsive-video-wrapper {
           width: 960px;    /* maximal erlaubte Abmessung im aktuellen Layout */
           max-width: 100%; /* maximal vorhandene Containerbreite verwenden!  */
        }
        .responsive-video { position: relative;
           padding-bottom:55%; padding-top:15px; height:0; overflow:hidden;
        }
        .responsive-video iframe { position: absolute; 
           top:0; left:0; width:100%; height:100%;
        }
-->
[TITLE]<h3>{TITLE}</h3>[/TITLE][SUBTITLE]
<h4>{SUBTITLE}</h4>[/SUBTITLE]

<div class="responsive-video-wrapper cf">
   <div class="responsive-video">
      [HTML]{HTML}[/HTML]
   </div>
</div>
Wenn ich jetzt ein Video von YouTube nutzen will, verwende ich einen ContentPart HTML mit dem oben genannten Template: responsive-video.tmpl

In den Inhaltsbereich des HTML-Contentparts füge ich dann den Code ein,
den ich von YouTube per TEILEN / EINBETTEN kopiere, z.B.

Code: Select all

<iframe width="853" height="480" src="//www.youtube.com/embed/kR75UraslRY?showinfo=0" frameborder="0" allowfullscreen></iframe>
Ich bin sicher, es geht auch eleganter ... aber für mich reicht's :D
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by Oliver Georgi »

So kann man die Klassen nach seinem Geschmack anpassen und das Ganze global lösen.


[vimeo]45112652[/vimeo]

https://css-tricks.com/NetMag/FluidWidt ... hVideo.php

Code: Select all

.video {
    // whatever;
}
.video.youtube {
   // more whatever
}
.video.vimeo {
   // well you can
}

Code: Select all

function phpwcms_embed_api($matches) {

	if(empty($matches[2])) {
		return ' ';
	}

	$matches[1]	= strtolower($matches[1]);
	$player		= '';

	if($matches[1] == 'youtube') {

		$player = '<iframe class="video youtube" width="552" height="312" src="http://www.youtube.com/embed/'.$matches[2].'?theme=light&color=white" frameborder="0" allowfullscreen></iframe>';

	} elseif($matches[1] == 'vimeo') {

		$player  = '<iframe class="video vimeo" src="http://player.vimeo.com/video/'.$matches[2].'?portrait=0&color=000&byline=0" width="552" height="312" ';
		$player .= 'frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';

	}

	return $player;
}

$content['all'] = preg_replace_callback('/\[(youtube|vimeo)\]([a-zA-Z0-9\-_]+?)\[\/(youtube|vimeo)\]/i', 'phpwcms_embed_api', $content['all']);
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by update »

Perfekt! Mit den Höhen habe ich noch ein paar Schwierigkeiten, aber das wird schon ;)
Danke!
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by update »

So ist es jetzt einigermaßen passend:

CP HTML Template responsive-video-youtube-rt.tmpl

Code: Select all

<!-- CSS:
/*** VIDEO ***/
.borderlike-video-wrapper {
	padding:5px;
	background:#eee;
}
.video-wrapper{
	position:relative;
	width:980px;
	max-width:100%;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	/*border:5px solid #eee !important;*/
}
.video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
}
.video.youtube {
	width: 100% !important;
	height: auto !important;
}
.video.vimeo {
	width: 100% !important;
	height: auto !important;
}
/*** VIDEO END ***/
-->

[TITLE]<h3>{TITLE}</h3>[/TITLE][SUBTITLE]
<h4>{SUBTITLE}</h4>[/SUBTITLE]

<div class="borderlike-video-wrapper">
	<div class="video-wrapper">
			[youtube][HTML]{HTML}[/HTML][/youtube]
	</div>
</div>
Und im HTML-Template steht nur noch "youtube-code-XYZ"
Und obigen Code ins FE-render
Passt :)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by Oliver Georgi »

Reichlich doppelt gemoppelt, und keine zu empfehlende Lösung, dann tut es der embed Code von Youtube, wenn man einen HTML-Content Part benutzt. Und was soll das auskommentierte <div>?

Ich finde immer, dass CSS so weit möglich in die Haupt-CSS gehört. Eher sollten Ausnahmen oder berechnete Werte in die <!-- CSS -->.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
Old Boy
Posts: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by Old Boy »

Die Kommentarzeichen finde ich durchaus vorteilhaft, wenn man zeigen will, was man gegenüber einer gegebenen Vorlage geändert hat :idea:

Und, natürlich sind die CSS-Anweisungen in die CSS-Datei zu "beamen"...
aber so ist es eben die übersichtlichste Art, das komplette Paket in der Funktion zu zeigen, zu übernehmen und zu testen.

(( Hattest du das selbst nicht SOGAR bei der DEFAULT Vorlage für "Text mit Bild" so gehandhabt, was ich (bisher noch immer) nicht verstanden habe? ))

Es liegt ja allein beim "Code-Sauger", das dann auf "korrekte Weise" in den eigenen Code zu übernehmen ... und "selbstverständlich" unnötigen Kram raus zu lassen!
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by update »

Das div war ein Rest vom Rumprobieren, ist jetzt weg... ;)
Ich finde nicht, dass das doppeltgemoppelt ist, sondern eher entweder-oder-oder.
Ich möchte den NormalUser sehen, der in einem Jahr noch weiß, dass da [youtube] eingefügt werden muss. Aber "füg mal einfach diese komische Nummer da ein" kann sich jede(r) merken.
Aber noch einfacher ist vielleicht tatsächlich Dein "füg den embed code in einen CP HTML ein" (+ fe-render).
Denn es wird ja erst richtig gut mit diesem Deinem fe-render.
Dieses CSS ist btw eine Ausnahme, denn es gibt (derzeit) nur eine einzige Seite mit Videos, alle anderen haben keine ;)
Danke für die Hinweise! :)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by Oliver Georgi »

Wenn man eine komplexe Vorlage erstellt, die das so behandelt, braucht es meinen Parser nicht — dann kann das <iframe> Tag da auch komplett noch mit einkopiert werden.

CSS-Ausnahme heißt bei mir, dass es z.B. bereits eine default Style-Anweisung gibt, die dann durch den CP und die Contentlogik ergänzt bzw. überschrieben wird. Die von mir in Vorlagen teils mitgeführten CSS-Sachen dienen vor allem als Beispiel, von dem man dann ableiten sollte.

Das BBTag [youtube] bzw. [vimeo] ist vor allem, um aus dem Inhaltsfluß heraus genau so etwas überall verfügbar zu haben. Für einen Kunden habe ich sowas über die Dateiverwaltung realisiert.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by update »

Kann es sein, dass bei show_content nicht funktionieren mag?
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by Oliver Georgi »

update wrote:Kann es sein, dass bei show_content nicht funktionieren mag?
Nein, kann nicht sein.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: youtube-Inhalte auf mobile nicht anklickbar

Post by update »

Oliver Georgi wrote:Nein, kann nicht sein.
Dann habe ich bei diesem einen OnePager anscheinend ein generelles (rendering)Problem... :?
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Post Reply