Inhaltselement youtube überarbeiten?

In der Contao Demo sieht man eigentlich schon , dass das Inhaltselement Youtube so wie es aktuell ist nicht wirklich brauchbar ist.
Abgesehen von der fehlenden Responsivität die man ja selbst per CSS umsetzen kann, ist die Vollbilddarstellung nicht wählbar, wenn man auf das viereckige Symbol unten rechts in der Playerleiste klickt.
Das Video passt sich ja offensichtlich auch nicht in den Player ein.
Youtube bringt doch schon einen Player mit, wozu also den mediaelement Player, der sichtlich Probleme macht ?
Wie macht Ihr das , außer jetzt den Code direkt per „eigener HTML Code“ einzubinden, was selbstverständlich auch ‚ne Lösung ist ;)
Wird das evtl. überarbeitet zukünftig ?
LG
Bennie

Zitat:

---

Zitat von Bennie

ist die Vollbilddarstellung nicht wählbar, wenn man auf das viereckige Symbol unten rechts in der Playerleiste klickt.

---

Also bei mir funktioniert das.

Zitat:

---

Zitat von Bennie

Das Video passt sich ja offensichtlich auch nicht in den Player ein.

---

Was meinst du damit?

Zitat:

---

Zitat von Bennie

Youtube bringt doch schon einen Player mit, wozu also den mediaelement Player, der sichtlich Probleme macht ?

---

Sehe ich allerdings auch so ;)

Zitat:

---

Zitat von Bennie

Wie macht Ihr das , außer jetzt den Code direkt per „eigener HTML Code“ einzubinden, was selbstverständlich auch ‚ne Lösung ist ;)

---

Erzeuge dir einfach ein eigenes ce_player Template und baue dir den <iframe> ein indem du zB

PHP-Code:

---

if( $this->type == 'youtube' ) 


---

überprüfst.

Zitat:

---

Zitat von Spooky

Also bei mir funktioniert das.

---

Das funktioniert bei mir bei keinem Browser, außer mit dem "normalen" Video Inhaltselement, da ja, aber nicht beim YT.

Zitat:

---

Zitat von Spooky

Was meinst du damit?

---

Mit Firefox 42 Win7 in der Demo, da hängt das Video links oben in der Ecke anstatt den Player auszufüllen. Beim IE ist es zwar größer aber oben und unten ein schwarzer Balken - das ist aber mit entsprechenden Lösungen für Responsivität kein Problem, wurde hier auch schon öfter gepostet, dennoch bin ich der Meinug, dass das Element zumindest für unerfahrene Nutzer Probleme birgt die man abstellen sollte, oder?

Zitat:

---

Zitat von Spooky

Erzeuge dir einfach ein eigenes ce_player Template und baue dir den <iframe> ein indem du zB

PHP-Code:

---

if( $this->type == 'youtube' ) 


---

überprüfst.

---

Ja das hatte ich auch schon gemacht bzw. mal geschaut wie das ein Theme Anbieter gelöst hat ;-)

Ist das denn sonst noch niemandem aufgefallen bzw. stört es niemanden?

Ich wollte meine Frage auch dahingehend verstanden wissen, ob es sinnvoll ist ein Ticket dafür zu schreiben oder ob evtl. jemand weiß ob es da ein Veränderung geben wird.

So wie es momentan ist (auch in der Demo) wirkt es etwas "unglücklich" ;)

LG
Bennie

Wie gesagt, bei mir treten die Probleme nicht auf.

Welches Javascript Framework hast du für den Videoplayer aktiv?

jQuery oder Mootools?

Soweit ich weiß läuft es mit Mootools und MediaBox fehlerfrei und mit jQuery nicht wirklich gut.

Es läuft auch mit jQuery einwandfrei.

Zitat:

---

Zitat von bizon

Es läuft auch mit jQuery einwandfrei.

---

Danke für Info. Hab ich mich wohl vertan.

Das Problem mit Javascript was ich meinte war in Zusammenhang mit YouTube-Videos in der Lightbox öffnen.
Das machte mit jQuery etwas Probleme.

Zitat:

---

Zitat von Spooky

Wie gesagt, bei mir treten die Probleme nicht auf.

---

Hm, interessant, welches OS bzw. Browser nutzt Du?

Ich habe es nochmal an verschiedenen Rechnern probiert, das Klicken auf das Kästchen für Vollbild klappt nie ...
Und das "nicht einpassen" in den Player (Video füllt Player nicht aus) habe ich auch auf dem Ipad (Safari) , insofern würde mich jetzt mal interessieren bei wem das so oder eben nicht so ist?
Ich meine die Contao Demo, also jQuery und Mediaelement.

LG
Bennie

Also auf meinem alten Notebook mit Windows Vista Home 32 Bit und Firefox 43.0.1 klappt es. Auch mit Google Chrome 47.0.2526.106 m. Im Vollbild lässt sich allerdings bei beiden Browsern oft die Leiste unten mit den Bedienelementen nicht anzeigen, bzw erst nach ziemlich langer Zeit. Aber das mag (mit) an der Rechnerleistung liegen.

Wir reden von dem YouTube Video auf dieser Seite:
http://demo.contao.org/en/media-elements.html

Funktioniert bei mir im Chrome 47.0.2526.106 (64-bit) auf Mac.
Habe allerdings oben und unten einen schwarzen Balken wegen dem Format.
Das ist wohl korrekt.

Vollbild funktioniert, allerdings manchmal erst beim 2. Versuch.
Hier muss ich manchmal noch mal zurück und das Vollbild erneut starten.

Unter Firefox läuft es problemlos. Alles auf den 1. Klick.

Hi,

mich stört das Youtube-Element auch - so, wie es ist.
Deshalb habe ich folgendes getan (wahrscheinlich nicht update-sicher, aber für meine Zwecke reichts):

Ein Template innerhalb von Contao verändert:
ce_player

HTML-Code:

---

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <!-- indexer::stop -->
  <?php if ($this->isVideo): ?>
          <iframe <?= $this->size ?> src="<?php foreach ($this->files as $file): ?><?= $file->path ?><?php endforeach; ?>" frameborder="0" allowfullscreen></iframe>
  <?php endif; ?>
  <!-- indexer::continue -->

<?php $this->endblock(); ?>

---

Und dazu dann noch in "/system/modules/core/elements/ContentYouTube.php" in Zeile 81 folgendes geschrieben:

HTML-Code:

---

$objFile->path = 'https://www.youtube.com/embed/' . $this->youtube;

---

Und schwupps, hat man das "original" Youtube-Embed-Template.

Dazu habe ich noch ein kleines JS geschrieben, damit sich der iFrame immer responsive anpasst.
Wen es interessiert:

HTML-Code:

---

function resizeYoutube(){
        var iframeWidth = $(window).width();
        if(iframeWidth < 960 && actualWindowWidth > 767){
                iframeWidth = 768;
                // meine 768er Variante
        }
        else if(iframeWidth < 768){
                iframeWidth = iframeWidth * 0.875;
                // meine mobile Variante, die links und rechts einen Abstand von 6.25vw (sprich 6,25% der Bildschirmgröße) hat.
                // Dadurch ergibt sich 100% - (2*6.25%) = 87.5%
        }
        var iframeHeight = iframeWidth * 0.5625;
        // Höhe proportional zur Breite (Original Youtube: 560x315)
        $("#container .full-width .ce_youtube iframe").each(function(){               
                $(this).width(iframeWidth).height(iframeHeight);
        });
}

---

Fertig. ;)

Zitat:

---

Zitat von MrLumbergh

Und dazu dann noch in "/system/modules/core/elements/ContentYouTube.php" in Zeile 81 folgendes geschrieben:

HTML-Code:

---

$objFile->path = 'https://www.youtube.com/embed/' . $this->youtube;

---

---

Das brauchst du ja nicht machen. Ich würde es zB so machen:

PHP-Code:

---

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <!-- indexer::stop -->
  <?php if( $this->type == 'youtube' ): ?>
    <div class="video-wrapper">
      <iframe type="text/html" src="https://www.youtube.com/embed/<?= $this->youtube ?><?php if( $this->autoplay ): ?>?autoplay=1<?php endif; ?>" frameborder="0"></iframe>
    </div>
  <?php elseif ($this->isVideo): ?>
    <video<?= $this->size ?><?php if ($this->poster): ?> poster="<?= $this->poster ?>" preload="none"<?php endif; ?><?php if ($this->autoplay): ?> autoplay<?php endif; ?> controls>
      <?php foreach ($this->files as $file): ?>
        <source type="<?= $file->mime ?>" src="<?= $file->path ?>" title="<?= $file->title ?>">
      <?php endforeach; ?>
    </video>
  <?php else: ?>
    <audio<?= $this->size ?> preload="none"<?php if ($this->autoplay): ?> autoplay<?php endif; ?> controls>
      <?php foreach ($this->files as $file): ?>
        <source type="<?= $file->mime ?>" src="<?= $file->path ?>" title="<?= $file->title ?>">
      <?php endforeach; ?>
    </audio>
  <?php endif; ?>
  <!-- indexer::continue -->

<?php $this->endblock(); ?>

---

$this->size habe ich momentan weg gelassen, da dort auch

PHP-Code:

---

width="" height="" 


---

drin stehen könnte. Die Größe setze ich aber sowieso per CSS:

PHP-Code:

---

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
} 


---

Generell denke ich auch, dass man die Änderung in "ContentYouTube.php" nicht brauchen dürfte.
Allerdings hatte ich noch keine Zeit zu schauen wie man das sonst gut löst.

Meist hat bisher die CSS-Lösung und eine Templateanpassung gereicht.

Zitat:

---

Zitat von Spooky

Das brauchst du ja nicht machen. Ich würde es zB so machen

---

Perfekt. So hatte ich gar nicht gedacht. :)

Diese Community is doch echt was feines. :)

Hi, also ich bin seit Tagen dabei eure Tipps umzusetzen doch leider mit mässigen Erfolg... mal geht der Container in responsive aber das Video nicht oder halt anders rum ...

ich habe den Code

HTML-Code:

---

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <!-- indexer::stop -->
  <?php if ($this->isVideo): ?>
          <iframe <?= $this->size ?> src="<?php foreach ($this->files as $file): ?><?= $file->path ?><?php endforeach; ?>" frameborder="0" allowfullscreen></iframe>
  <?php endif; ?>
  <!-- indexer::continue -->

<?php $this->endblock(); ?>

---

in ein eigenes Template gepackt Ce_responsive_player

so dann habe ich den Code :

HTML-Code:

---

<script>function resizeYoutube(){
        var iframeWidth = $(window).width();
        if(iframeWidth < 960 && actualWindowWidth > 767){
                iframeWidth = 768;
                // meine 768er Variante
        }
        else if(iframeWidth < 768){
                iframeWidth = iframeWidth * 0.875;
                // meine mobile Variante, die links und rechts einen Abstand von 6.25vw (sprich 6,25% der Bildschirmgröße) hat.
                // Dadurch ergibt sich 100% - (2*6.25%) = 87.5%
        }
        var iframeHeight = iframeWidth * 0.5625;
        // Höhe proportional zur Breite (Original Youtube: 560x315)
        $("#container .full-width .ce_youtube iframe").each(function(){               
                $(this).width(iframeWidth).height(iframeHeight);
        });
}</script>

---

im seitenlayout unter eigener javascript gepackt.

und die Zeile 81 in contentYoutube geändert

HTML-Code:

---

Und dazu dann noch in "/system/modules/core/elements/ContentYouTube.php" in Zeile 81 folgendes geschrieben:
HTML-Code:
$objFile->path = 'https://www.youtube.com/embed/' . $this->youtube;

---

leider funktioniert das nicht richtig ... ok ich kann zwar videos richtig anschauen , aber das video ist auf dem desktop zu klein und wenn ich die Größe ändere auf 400*300 sieht das auf dem Desktop zwar okay aus aber auf dem handy im Hochformat geht das dann nicht ... , ich habe das individuelle Template auf CE_responive_Player umgestellt. Hier mal eine Demo Seite in Contao 3.5.3 selbige problem aber auch in Contao 3.2.9 und 3.4 http://heikothomsen.de/index.php/new...tes-video.html wer kann denn da helfen und würde mir ggf tipps geben wie ich das hin bekomme, dass das YT Video responsive angezeigt wird!?!?!

Vielen lieben dank

Warum hast du es nicht so gemacht wie hier beschrieben?

Zitat:

---

Zitat von Spooky

Warum hast du es nicht so gemacht wie hier beschrieben?

---

Hi weil ich fast den gleichen Effekt raus bekomme .. habe das gerade geändert....http://heikothomsen.de/index.php/new...tes-video.html
kann mir jemand mal die CSS Datei als Screenshot schicken.

Habe die CSS Datei im Seitenlayout eingebunden. Den Code ganz unten eingefügt. Zu Meiner Sicherheit was soll in den Selektor stehen ? nicht das da irgendwo der Fehler liegt.

Das Problem am Code von Spooky ist das ich auch das Video nicht mehr Große machen kann. und auf dem Desktop trotz einer Größe von 400*300 px sehr klein ist.. außerdem es Mobil auch nicht Responsive ist.

vielen danke für die Hilfe

Zitat:

---

Zitat von flensburger-stadtanzeig

Hi weil ich fast den gleichen Effekt raus bekomme .. habe das gerade geändert....http://heikothomsen.de/index.php/new...tes-video.html

---

Das von mir gepostete CSS ist dort nicht eingebunden.

Zitat:

---

Zitat von flensburger-stadtanzeig

kann mir jemand mal die CSS Datei als Screenshot schicken.

---

Die CSS Datei als Screenshot..? Was meinst du damit?

Zitat:

---

Zitat von flensburger-stadtanzeig

Habe die CSS Datei im Seitenlayout eingebunden. Den Code ganz unten eingefügt. Zu Meiner Sicherheit was soll in den Selektor stehen ? nicht das da irgendwo der Fehler liegt.

---

Wie bindest du das CSS tatsächlich ein? Den Selektor solltest du natürlich so belassen, wie er schon dort steht.

Zitat:

---

Zitat von flensburger-stadtanzeig

Das Problem am Code von Spooky ist das ich auch das Video nicht mehr Große machen kann. und auf dem Desktop trotz einer Größe von 400*300 px sehr klein ist.. außerdem es Mobil auch nicht Responsive ist.

---

Weil, wie gesagt, das CSS nicht eingebunden ist. Zur Erklärung: das CSS skaliert das Video immer auf die volle, verfügbare Breite und auf ein Seitenverhältnis von 16:9.

Habe das noch mal alles überarbeitet, geht nun , habe hier mal alles angefügt für die nachfolgenden die auch das Problem haben. dank geht an Spooky für den CODE ...


Template:
Habe im Iframe noch die Vollbildfunktion eingebaut. kollege war mal so freundlich mir eben zu helfen.

HTML-Code:

---

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <!-- indexer::stop -->
  <?php if( $this->type == 'youtube' ): ?>
    <div class="video-wrapper">
      <iframe type="text/html" src="https://www.youtube.com/embed/<?= $this->youtube ?><?php if( $this->autoplay ): ?>?autoplay=1<?php endif; ?>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
  <?php elseif ($this->isVideo): ?>
    <video<?= $this->size ?><?php if ($this->poster): ?> poster="<?= $this->poster ?>" preload="none"<?php endif; ?><?php if ($this->autoplay): ?> autoplay<?php endif; ?> controls>
      <?php foreach ($this->files as $file): ?>
        <source type="<?= $file->mime ?>" src="<?= $file->path ?>" title="<?= $file->title ?>">
      <?php endforeach; ?>
    </video>
  <?php else: ?>
    <audio<?= $this->size ?> preload="none"<?php if ($this->autoplay): ?> autoplay<?php endif; ?> controls>
      <?php foreach ($this->files as $file): ?>
        <source type="<?= $file->mime ?>" src="<?= $file->path ?>" title="<?= $file->title ?>">
      <?php endforeach; ?>
    </audio>
  <?php endif; ?>
  <!-- indexer::continue -->

<?php $this->endblock(); ?>

---

CSS:

Anhang 17203

Seitenlayout:

Anhang 17204

Inhaltselement Youtube:

Anhang 17205

Hallöchen,

ich habe es jetzt exakt so gemacht wie flensburger, aber leider klappt das Vollbild nicht ("ist nicht verfügbar"-Meldung).
Habe es in Firefox und Edge getestet, auf Youtube selbst funktioniert das Vollbild des Videos.

Hat jemand einen Gedanken woran das liegen könnte?
Vielen dank schonmal :)

Hallo nochmal,

nochmal wegen dem "Vollbild nicht möglich".
Untersuche ich das Objekt, dann entdecke ich z.B. beim Button folgendes:

HTML-Code:

---

<button class="ytp-fullscreen-button ytp-button" aria-disabled="true">

---

Mein Verdacht ist, dass dies der Kandidat ist. Auf einer anderen Seite, die das Gleiche Video eingebettet hat ist der Zusatz "aria-disabled="true" nämlich nicht im Quelltext.

Nun kann ich wohl hablbwegs CSS, aber kein php oder jquery...
Könnte mir jemand helfen diese Anweisung auf "false" zu setzen, so dass sie für alle Videos gilt die ich mit dem Code einbinde. Ideal wäre ein Einbettung dessen in den template-Code von Spooky/flensburger (sofern möglich), denn bisher benutze ich diesen unverändert wie oben beschrieben.
Danke!

Der Button kommt vom YouTube HTML5 Player, nicht von einem Contao Template.

Link zur Seite?

Maaaaannnnooomannn...

... eben veröffentliche ich die Seite temporär damit du drauf schauen kannst... und nun funzt der Button.
Anyway, temporär hier lang: [wegen weiter Bauarbeiten wieder geschlossen, danke an alle]

Tja, dann passt wohl alles :D

@Tinker2

Besser Freizeichen als Freitod, ich hab etwas geschmökert. Ich hoffe, Dir wird hier geholfen. Bei so viel Kreativität wirst Du das sicher umsetzen können. :)

;) @spooky

@ Evelyne
Jau, danke schön. Temporäre Nervenzusammenbrüche und überraschende Lösungen gehören da zum Glück schon zur Grundausrüstung :)

@Tinker2

Da wüsste ich sogar temporär eine Software-Lösung: http://www.burnoutprotector.com
mit Klinikanschluss. :D

Oh, netter Link. Das schau ich mir mal bei Gelegenheit genauer an. Da ich da aber schon durch bin hab ich meine Strategien um nicht wieder dort zu landen ;)