Youtubevideo einbinden: Unterschied zwischen den Versionen

Aus GCMS Hilfe
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
 
[[Datei:Video1.png|miniatur|Nach klicken auf "Einbetten"]]Um ein Youtube-Video auf dem GCMS einzubinden kann der unten dargestellte Code genutzt werden. Der Vorteil bei dieser Einbindungsart ist, dass das Video responsiv eingebunden wird und sich daher automatisch an die Bildschirmbreite anpasst.  
 
[[Datei:Video1.png|miniatur|Nach klicken auf "Einbetten"]]Um ein Youtube-Video auf dem GCMS einzubinden kann der unten dargestellte Code genutzt werden. Der Vorteil bei dieser Einbindungsart ist, dass das Video responsiv eingebunden wird und sich daher automatisch an die Bildschirmbreite anpasst.  
  
Sie müssen jetzt nurnoch einen speziellen Link von ihrem Youtube-Video auswählen und bei src="XX" einfügen.  
+
Um Ihr Youtube-Video einzubinden gehen Sie auf die Seite von Youtube und rufen ihr Video auf. Bei diesem klicken Sie unten rechts auf "Teilen" und anschließend auf "Einbetten". In dem rechts dargestellten Screenshot sehen Sie das Fenster das sich öffnen sollte. 
  
Dafür gehen Sie auf Ihr Video und klicken und rechts unterhalb des Videos auf "Teilen" und anschließend auf "Einbetten". Sie müssten jetzt einen Code wie im Bild dargestellt sehen können. Diesen kopieren Sie sich und fügen ihn in einen beliebigen Editor ein.  
+
Diesen gesamten Link kopieren Sie und fügen ihn in einen Editor ein. Nun ist es möglich den nötigen Code zu koperen. Es handelt sich hierbei um den Abschnitt der mit '''https://''' beginnt.  
 
+
<iframe width="560" height="315" src="<nowiki><nowiki>'''</nowiki></nowiki><u>'''<nowiki>https://www.youtube.com/embed/lw-tu0-ofzQ</nowiki>'''" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Aus diesem Code müssen Sie den src Link kopieren.
+
[[Datei:Youtube1.png|miniatur|Code für ein Youtube-Video - Backend]]Den hier Fett markierten Teil kopieren Sie und fügen ihn in dem unteren Code bei '''src=" LINK "''' ein. [[Datei:Youtube2.png|miniatur|Ansicht der Seite - Frontend]]
[[Datei:Youtube1.png|miniatur|Code für ein Youtube-Video - Backend]]
 
[[Datei:Youtube2.png|miniatur|Ansicht der Seite - Frontend]]
 
<code><iframe width="560" height="315" src="<nowiki>'''</nowiki><u><nowiki>https://www.youtube.com/embed/lw-tu0-ofzQ</nowiki>'''" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'''</code>
 
 
 
Wenn Sie diesen kopiert haben können Sie ihn in dem nachfolgenden Code an entsprechender Stelle einfügen und das Video ist erfolgreich auf ihrer Seite eingebunden.
 
 
  <keinbr/>
 
  <keinbr/>
 
  <nowiki><div class="embed-responsive embed-responsive-16by9"></nowiki>
 
  <nowiki><div class="embed-responsive embed-responsive-16by9"></nowiki>
       <iframe class="embed-responsive-item" width="100%"  src="hier muss ihr Link hin" frameborder="0" allowfullscreen></iframe>
+
       <iframe class="embed-responsive-item" width="100%"  src="'''hier muss ihr Link hin'''" frameborder="0" allowfullscreen></iframe>
 
  <nowiki></div></nowiki>
 
  <nowiki></div></nowiki>
 +
Anschließend sollte das Video wie rechts dargestellt auf ihrer Seite erscheinen.

Version vom 11. April 2018, 13:32 Uhr

Nach klicken auf "Einbetten"
Um ein Youtube-Video auf dem GCMS einzubinden kann der unten dargestellte Code genutzt werden. Der Vorteil bei dieser Einbindungsart ist, dass das Video responsiv eingebunden wird und sich daher automatisch an die Bildschirmbreite anpasst.

Um Ihr Youtube-Video einzubinden gehen Sie auf die Seite von Youtube und rufen ihr Video auf. Bei diesem klicken Sie unten rechts auf "Teilen" und anschließend auf "Einbetten". In dem rechts dargestellten Screenshot sehen Sie das Fenster das sich öffnen sollte.

Diesen gesamten Link kopieren Sie und fügen ihn in einen Editor ein. Nun ist es möglich den nötigen Code zu koperen. Es handelt sich hierbei um den Abschnitt der mit https:// beginnt.

<iframe width="560" height="315" src="<nowiki>'''</nowiki>https://www.youtube.com/embed/lw-tu0-ofzQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Code für ein Youtube-Video - Backend
Den hier Fett markierten Teil kopieren Sie und fügen ihn in dem unteren Code bei src=" LINK " ein.
Ansicht der Seite - Frontend
<keinbr/>
<div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item" width="100%"  src="hier muss ihr Link hin" frameborder="0" allowfullscreen></iframe>
</div>

Anschließend sollte das Video wie rechts dargestellt auf ihrer Seite erscheinen.