• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Hinweis vor öffnen eines eingebeteten Videos - reines HTML - kein CMS

M

mipau

Neues Mitglied
Hallo, bin mal wieder hier, immer dann wenn ich Fragen habe. :) Heute geht es um die Einbindung von Hinweisen, bevor ein Link, in meinem Fall ein Film, eingebunden mit iframe von YouTube, gezeigt wird.
Für CMS Systeme gibt es die beiden von Heise, Zwei Klick und Shariff-Projekt für CMS Systeme, soviel schon mal gegooglet - konnte daraus auch nicht erkennen das man die beiden als reines HTML nehmen könnte.

Hat jemand eine Idee wie man das auch für reine HTML (5) Seiten umsetzen könnte? Suche da jetzt schon ziemlich lange in google rum, aber noch nichts passenden gefunden und wenn dann eben besagte CMS Syteme. Javascript ja schön und gut, aber nicht jeder hat Popups aktiviert. Bin mal gespannt was ihr mir vorschlagt. Danke schon mal im voraus, Gruß Michael.
 
Warum fügst du nicht zunächst einen leeren Iframe ein und lädst dort zunächst als 'src' deinen Warnhinweis. Im Warnhinweis dann einen Link (mit target="_self") auf eine Datei, in der du den YouTube Code hast.
 
Hallo Sailor, danke richtig iframe, funktioniert auch soweit aber das Problem bei diesem iframe ist dann, das die eingefügte Grafik mit dem Hinweistext in der Mobilfunkvariante immer zu groß dargestellt wird.

Der iframe den ich probiere lautet folgendermaßen:
Code: 
<script type="text/javascript" src="js/film.js"></script>
<iframe src="https://www.domain.de/test.html" name="testframe" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" width="560" height="315" onload="setIframeHeight();">

Die Seite die dort mit der Hinweisgrafik eingebunden wird:
<a href="https://www.youtube-nocookie.com/embed/" target="_self">
<img src="images/film.jpg" width="560" height="315" border="0" alt="Film1" title="Film1"></a>

Hm, geht das nicht auch mit responsive? Alles was ich aber bis jetzt da ausprobiert habe funktioniert nicht. Entweder abgeschnitten, zu klein oder zu groß angezeigt. Denke das der iframe da nicht so richtig mitspielt.

Noch jemand eine Idee?
 
Ich habe ehrlich gesagt deine Frage noch nicht richtig verstanden. Könntest du das nochmal genauer erklären?

Laut meinem Verständnis willst du beim Öffnen der Seite eine Benachrichtigung machen. Sobald diese bestätigt wird, dann wird das Video eingebettet. Habe ich dich da richtig verstanden?
 
Ja so sieht es aus.
Mit dem Erklären ist es immer so eine Sache. :)

Stop, jein.
Früher war es so, das das Video per iframe eingebettet war. Nun soll über diesem Video aber ein Hinweis kommen und erst dann der Klick auf das Video möglich sein.
Mit dem iframe von Sailor gar nicht mal so schlecht allerdings habe ich dann das Problem der Größe auf dem Mobiltelefon.
 
mipau schrieb:
Javascript ja schön und gut, aber nicht jeder hat Popups aktiviert.
Zum Vergrößern anklicken....
Das macht man doch heutzutage nicht mehr mit Popups, sondern mit HTML-Elementen, mit CSS formatiert, die sich über den restlichen Content legen und mit JavaScript ein-/ausgeblendet werden. Damit hätte sich das mit nur in reinem HTML erledigt.
Grüße,
Felixprogram
 
Das geht natürlich auch responsive!
Zum Einen nutzt man da MediaQueries, um für die unterschiedlichen Bildschirmgrößen die jeweils passenden Einstellungen vorzunehmen.
Als nächstes verzichtet man weitestgehend auf absolute Angaben in Pixeln (px) - lieber relative Angaben in %. Und dann natürlich noch dieses Inline CSS möglichst in ein Stylesheet unterbringen.
Problematisch ist, wenn ich mich richtig erinnere, die Dimensionierung des IFrames, der muss ja immer die Proportionen des Videos haben und wenn das Display dann kleiner wird, muss man das eben proportional in MediaQueries regeln. Das geht dann aber doch am besten mit Pixeln. IFrames sind da etwas heikel.
So habe ich das gelöst.
Der Iframe
HTML: 
<iframe class="ext_vid" src="vorschau.html" frameborder="0" allowfullscreen></iframe>

Das Vorschaubild mit Link zum Video
HTML: 
<a href="https://www.youtube-nocookie.com/embed/" target="_self">
<img class="vorschau" src="vorschaubild.png" alt="Alternativtext" title="Klick auf das Vorschaubild stellt Verbindung zu YouTube her!">
</a>

Und das zugehörige CSS
HTML: 
img.vorschau {
  width: 100%;
  height: auto;
  border: 0;
  }


iframe.ext_vid {
  width: 640px;
  height: 360px;
  border: 0px;
  }

@media scree and (max-width: 700px) {
  iframe.ext_vid {
    width: 320px;
    height: 180px;
    }
}

Die Werte natürlich nach deinen Erfordernissen anpassen.
 
Danke Sailor, ja so sieht das schon besser aus! Auch wenn ich immer noch das Problem mit dieser blöden Anzeige im Smartphone habe. Die will und will nicht kleiner werden... Werde mir das nachher nochmal genauer anschauen. Grüße Michael.
 
Mach noch eine (mehrere) weitere MediaQueries... so ein SmartPhone hat ja meist nicht mehr als 320px Breite... dann mach sowas wie
@media screen and (max-width: 400 px) {
iframe.ext_vid {
width: 280px;
height: 158px;
}
Irgendwie erwischt du dann schon die richtigen Iframe-Abmessungen für Handys.
Die Werte müssen natürlich zu deinem Videoformat passen.
 
Dankeschön Sailor,
jetzt hat es geklappt! Hier mal der Code für ein YouTube Video mit einem iframe mit der Größe von 560x315.

Code: 
img.hinweis {
  width: 100%;
  height: auto;
  border: 0;
  frameborder: 0;
  }
iframe.ext_video {
  width: 560px;
  height: 315px;
  border: 0px;
  frameborder: 0;
  }
@media screen and (max-width: 560px) {
iframe.ext_video {
  width: 320px;
  height: 180px;
  border: 0;
  frameborder: 0;
  }
}

Mal sehen was als nächstes kommt. :-)
Gruß Michael.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben