phpwcms Support Forum

The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
https://forum.phpwcms.org/

youtube-Inhalte auf mobile nicht anklickbar

https://forum.phpwcms.org/viewtopic.php?t=24669

Page 1 of 1

youtube-Inhalte auf mobile nicht anklickbar

Posted: Sat 11. Apr 2015, 19:56
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

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sat 11. Apr 2015, 22:01
by pepe
Kann man sich das Problem irgendwo "live" ansehen???

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sat 11. Apr 2015, 23:08
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

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sun 12. Apr 2015, 07:27
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']);

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sun 12. Apr 2015, 11:31
by update
Perfekt! Mit den Höhen habe ich noch ein paar Schwierigkeiten, aber das wird schon ;)
Danke!

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sun 12. Apr 2015, 13:18
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 :)

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sun 12. Apr 2015, 18:14
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 -->.

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sun 12. Apr 2015, 18:36
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!

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sun 12. Apr 2015, 18:54
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! :)

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Mon 13. Apr 2015, 06:20
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.

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sat 18. Apr 2015, 13:03
by update
Kann es sein, dass bei show_content nicht funktionieren mag?

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sat 18. Apr 2015, 13:49
by Oliver Georgi
update wrote:Kann es sein, dass bei show_content nicht funktionieren mag?
Nein, kann nicht sein.

Re: youtube-Inhalte auf mobile nicht anklickbar

Posted: Sat 18. Apr 2015, 14:05
by update
Oliver Georgi wrote:Nein, kann nicht sein.
Dann habe ich bei diesem einen OnePager anscheinend ein generelles (rendering)Problem... :?
All times are UTC+01:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited