youtube-Inhalte auf mobile nicht anklickbar

[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

[pepe]

Kann man sich das Problem irgendwo "live" ansehen???

[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

[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']);

[update]

Perfekt! Mit den Höhen habe ich noch ein paar Schwierigkeiten, aber das wird schon
Danke!

[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

[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 -->.

[Old Boy]

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

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!

[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!

[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.

[update]

Kann es sein, dass bei show_content nicht funktionieren mag?

[Oliver Georgi]

Kann es sein, dass bei show_content nicht funktionieren mag?

Nein, kann nicht sein.

[update]

Nein, kann nicht sein.

Dann habe ich bei diesem einen OnePager anscheinend ein generelles (rendering)Problem...