End of Support for Joomla 3 - Forum closed
360° Youtube Video geht nicht mobil
- DieGlasperle
- Offline Topic Author
- Fresh Boarder
- Posts: 5
- Thank you received: 0
Hallo,
wir haben das JP-Hifi Template.
Ich versuche folgendes 360° Video einzubinden: <iframe src="//www.youtube.com/embed/NlTAbiOAfjs?rel=0" frameborder="0" height="450" width="800" allowfullscreen>
Die Wiedergabe des Videos soll im VR Modus erfolgen - d.h. die Bewegung im virtuellen Raum sollte möglich sein. Dies ist funktioniert aber leider nur auf dem Desktop. In der mobilen Version wird das spährisch verzerrte Gesammtbild angezeigt.
Wird das Video auf Youtube direkt abgespielt, so wird es auf allen Geräten im 360° Modus abgespielt.
Wie bekomme ich es hin, wenn ich es in Joomla mit JP-Hifi einbette, dass das Video auf dem mobilen Gerät im 360° modus abgespielt wird und am besten noch responsiv?
Vielen Dank im Voraus!
Uwe
wir haben das JP-Hifi Template.
Ich versuche folgendes 360° Video einzubinden: <iframe src="//www.youtube.com/embed/NlTAbiOAfjs?rel=0" frameborder="0" height="450" width="800" allowfullscreen>
Die Wiedergabe des Videos soll im VR Modus erfolgen - d.h. die Bewegung im virtuellen Raum sollte möglich sein. Dies ist funktioniert aber leider nur auf dem Desktop. In der mobilen Version wird das spährisch verzerrte Gesammtbild angezeigt.
Wird das Video auf Youtube direkt abgespielt, so wird es auf allen Geräten im 360° Modus abgespielt.
Wie bekomme ich es hin, wenn ich es in Joomla mit JP-Hifi einbette, dass das Video auf dem mobilen Gerät im 360° modus abgespielt wird und am besten noch responsiv?
Vielen Dank im Voraus!
Uwe
by DieGlasperle
Please Log in or Create an account to join the conversation.
- joomlaplates
- Offline
- Moderator
- Posts: 8807
- Thank you received: 1732
Replied by joomlaplates on topic 360° Youtube Video geht nicht mobil
Posted 7 years 7 months ago #17102
Hallo, da kann ich ihnen leider nicht weiter helfen!
Aber sie könnten folgendes probieren:
1.) Fügen sie folgenden css code in ihre css/custom.css ein:
2.) Nun fügen sie ihren Iframe wie folgt ein. ( Joomla Editor komplett deaktivieren)
Aber sie könnten folgendes probieren:
1.) Fügen sie folgenden css code in ihre css/custom.css ein:
Code:
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
margin:20px 0;
}
2.) Nun fügen sie ihren Iframe wie folgt ein. ( Joomla Editor komplett deaktivieren)
Code:
<div class="responsive-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/NlTAbiOAfjs" frameborder="0" allowfullscreen></iframe>
</div>
Dokumentation:
www.joomlaplates.de/dokumentation.html
www.joomlaplates.de/dokumentation.html
Last Edit:7 years 7 months ago
by joomlaplates
Last edit: 7 years 7 months ago by joomlaplates.
Please Log in or Create an account to join the conversation.
- DieGlasperle
- Offline Topic Author
- Fresh Boarder
- Posts: 5
- Thank you received: 0
Replied by DieGlasperle on topic 360° Youtube Video geht nicht mobil
Posted 7 years 7 months ago #17137
Hallo,
danke für die Antwort!
Auf einem realen iOS Smartphone hat sich die Breite nicht geändert und das Video ist doppelt so breit wie der Bildschirm.
Ich bin nicht sicher, ob ich alles richtig gemacht habe, denn ich habe auch aus einem Post zum Thema "H1 Darstellung zu groß" in Ihrem Forum folgendes, neben den von Ihnen vorgeschlagenen ".responsive-video" noch in das custom.css eingepflegt:
@media (max-width: 400px) {
h1{ font-size: 60%;
}
}
was allerdings beides keine Auswirkungen hatte. Meine Custom.css steht hier: /home/www/templates/jp-hifi/css und ich lasse das LESS jedes Mal kompilieren. Gibt es woanders noch etwas einzustellen? Im Firebug müsste ich doch die angaben zu dem responsive-video Style anschauen können? Ich sehe nur die Class im HTML-Code.
Die Seite mit dem Problem: die-glasperle.de/neues.html
Vielen Dank im Voraus!
Uwe
danke für die Antwort!
Auf einem realen iOS Smartphone hat sich die Breite nicht geändert und das Video ist doppelt so breit wie der Bildschirm.
Ich bin nicht sicher, ob ich alles richtig gemacht habe, denn ich habe auch aus einem Post zum Thema "H1 Darstellung zu groß" in Ihrem Forum folgendes, neben den von Ihnen vorgeschlagenen ".responsive-video" noch in das custom.css eingepflegt:
@media (max-width: 400px) {
h1{ font-size: 60%;
}
}
was allerdings beides keine Auswirkungen hatte. Meine Custom.css steht hier: /home/www/templates/jp-hifi/css und ich lasse das LESS jedes Mal kompilieren. Gibt es woanders noch etwas einzustellen? Im Firebug müsste ich doch die angaben zu dem responsive-video Style anschauen können? Ich sehe nur die Class im HTML-Code.
Die Seite mit dem Problem: die-glasperle.de/neues.html
Vielen Dank im Voraus!
Uwe
by DieGlasperle
Please Log in or Create an account to join the conversation.
- joomlaplates
- Offline
- Moderator
- Posts: 8807
- Thank you received: 1732
Replied by joomlaplates on topic 360° Youtube Video geht nicht mobil
Posted 7 years 7 months ago #17139
Hallo, bitte deaktivieren sie während der Entwicklung den JCH.
Die Komprimierung wird erst aktiviert, wenn alles fertig ist!!!
Die Komprimierung wird erst aktiviert, wenn alles fertig ist!!!
Dokumentation:
www.joomlaplates.de/dokumentation.html
www.joomlaplates.de/dokumentation.html
by joomlaplates
The following user(s) said Thank You: DieGlasperle
Please Log in or Create an account to join the conversation.
Moderators: joomlaplates