Bild wird nicht richtig verlinkt - Hilfe

  • Ich habe ein Problem mit meiner Webseite. Ich habe auf der Startseite Videos verlinkt. Das bedeutet genauer Thumbnails. Das Problem ist, wenn man auf das Bild des Thumbnails klickt, komme ich nur auf die Startseite zurück. Zum Video gelange ich nur, wenn ich auf den Titel (unter dem Bild) klicke. Wie kann das sein?

    Webseite: http://youfunclip.com/
    Erstellung: http://i.imgur.com/0tyPrk2.png

    Ich habe bei der Erstellung nur die Möglichkeit, den eingebetteten Link des YouTube Videos und ein Thumbnail anzugeben. Warum wird man aber immer auf die Startseite weitergeleitet, wenn man auf das thumbnail klickt?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Was mir erst heute beim Code zum Einbinden bei YouTube und nun auch im Quelltext Deiner Seite auffiel, dass src="// notiert wurde aber nicht src="http://. Sieht für mich merkwürdig aus und ich würde es erst einmal für einen Bug bei YouTube halten.

    Oder gibt es da etwas Neues, dass mit HTML5 die Browser das Protokoll selbst erkennen sollen? Keine Ahnung, vielleicht lebe ich da hinterm Mond, doch ich würde das Protokoll noch benutzen und vielleicht ist das dann auch ein Grund, warum das andere Attribut leer bleibt?

    Hier sehe ich auch noch nichts anderes, als dass nach wie vor bei absoluten Pfadangaben das HTTP-Protokoll mit angegeben wird:

    http://dev.w3.org/html5/markup/a.html
    Ein Beispiel von einer Deiner Seiten:

    HTML
    <iframe width="560" height="315" src="//www.youtube.com/embed/-uYjP-D1GqE" frameborder="0" allowfullscreen></iframe>

    Und der Code, den ich heute bei YouTube sah, der sah nicht anders aus, doch warum ist da kein http: enthalten?

    Einmal editiert, zuletzt von Melewo (28. August 2013 um 18:10)

  • Nun habe ich da noch einmal nachgelesen in Stefan Münz / Clemenz Gull, Ausgabe 2012 und da steht auch noch nichts anderes unter Referenzieren, als dass die Notierung vollständig mit Angabe des Protokolls erfolgen muss, wenn auf andere Domains zugegriffen wird.

  • Das "fehlende" http ist kein Problem.

    Wenn ich aber wie oben ein Bild einbinde und das Ziel (href) des Links nicht setze, ist es kein Wunder dass da nix passiert...

    Lieben Gruß, Appendix

  • Erstmal vielen dank für die vielen Antworten.
    Muss ich jetzt den Einbettlink oder den link zum Thumbnail bearbeiten?

    Youtube-Einbettlink: <iframe width="560" height="315" src="//http://www.youtube.com/embed/-uYjP-D1GqE" frameborder="0" allowfullscreen></iframe>

    Thumbnail: http://i.imgur.com/70bE8kI.png


    EDIT: Muss also ein https vor "//http://www.youtube.com..." ?

    Einmal editiert, zuletzt von liked (28. August 2013 um 19:05)

  • Du musst das Bild verlinken, schließlich klickt man ja auch darauf...

    HTML
    <a href="url zum video" weitere Angaben...><img src="Bild verlinken" weitere Angaben...></a>

    Lieben Gruß, Appendix

  • Das ist doch der Link fürs Bild, der da leer ist, nur das der noch ein DIV enthält:

    HTML
    <a href="" rel="bookmark" class="various fancybox.iframe">
        <img src="http://i.imgur.com/70bE8kI.png" alt="MOTORCYCLIST CRASHING INTO CAR" class="entry-thumb"/>
        <div class="video-flag"></div>
    </a>
  • @Appendix
    Ich habe es so gemacht wie du es gesagt hast, beim 1. Bild von links. Jetzt verschwindet das Thumbnail leider und wird durch einen Link ersetzt, welcher das Video in Vollbild erscheinen lässt.

    @Melewo
    Beim 2. Bild habe ich es so gemacht wie du. Das Thumbnail bleibt vorhanden, aber beim daraufklicken öffnet sich wieder ein Vollbild vom Video. Ich möchte aber, dass man zu der gleichen Seite geleitet wird, wie der Link unter dem Bild. Ist das möglich? :)


    Webseite: http://www.youfunclip.com

  • Da gehört bei Bild 2 dieser Link hinein:

    http://ephox.bplaced.net/2013/08/speedi…ashes-into-car/

    Bei den anderen beiden ebenfalls der entsprechende Link.


    Reden wir gerade über den Thumbnail-Link? Wenn ja, dann wird das Thumbnail nicht mehr angezeigt, wenn ich es so nach deiner Theorie einfüge:

    HTML
    <a href="http://ephox.bplaced.net/2013/08/spe...shes-into-car/" rel="bookmark" class="various fancybox.iframe"><img src="http://i.imgur.com/70bE8kI.png" alt="MOTORCYCLIST CRASHING INTO CAR" class="entry-thumb"/><div class="video-flag"></div></a>

    Siehe Bild 2

  • Schaust Du auch ab und an wenigsten mal in den Quelltext, Du hast das gequotet mit Entities eingefügt und der eigentliche Link ist immer noch leer.


    HTML
    <a href="" rel="bookmark" class="various fancybox.iframe">
         <img src="&lt;a href=&quot;&quot;  rel=&quot;bookmark&quot; class=&quot;various  fancybox.iframe&quot;&gt;&lt;img  src=&quot;http://i.imgur.com/70bE8kI.png&quot;  alt=&quot;MOTORCYCLIST CRASHING INTO CAR&quot;  class=&quot;entry-thumb&quot;/&gt;&lt;lass=&quot;video-flag&quot;&gt;&lt;/div&gt;  &lt;/a&gt;" alt="STREET LAMP CRASHING ONTO CAR"  class="entry-thumb"/>                
        <div class="video-flag"></div>
    </a>

    Und wenn Du das nächste Mal in den Quelltext schaust, dann sollte dieser Abschnitt für Bild 2 so wie hier aussehen, nur nicht so schön ausgerichtet vom Zeilenanfang.

    HTML
    <a href="http://ephox.bplaced.net/2013/08/speeding-motorcyclist-crashes-into-car/" rel="bookmark" class="various fancybox.iframe">
        <img src="http://i.imgur.com/70bE8kI.png" alt="MOTORCYCLIST CRASHING INTO CAR" class="entry-thumb"/>
        <div class="video-flag"></div>
    </a>

    Einmal editiert, zuletzt von Melewo (28. August 2013 um 20:57)

  • Melewo

    Ich verstehe wirklich nicht was du meinst. Ich komme hier wirklich nicht weiter..

    Video Embed Code:

    HTML
    <iframe width="560" height="315" src="//www.youtube.com/embed/-uYjP-D1GqE" frameborder="0" allowfullscreen></iframe>


    Video Thumbnail URL:

    HTML
    <a href="" rel="bookmark" class="various fancybox.iframe">     <img src="&lt;a href=&quot;&quot;  rel=&quot;bookmark&quot; class=&quot;various  fancybox.iframe&quot;&gt;&lt;img  src=&quot;http://i.imgur.com/70bE8kI.png&quot;  alt=&quot;MOTORCYCLIST CRASHING INTO CAR&quot;  class=&quot;entry-thumb&quot;/&gt;&lt;lass=&quot;video-flag&quot;&gt;&lt;/div&gt; &lt;/a&gt;" alt="STREET LAMP CRASHING ONTO CAR"  class="entry-thumb"/>                    <div class="video-flag"></div></a>

    Könntest du mir bitte sagen, wo der Fehler ist? :)

  • Na wie fügst Du das denn ein, über irgend so eine Fancybox?
    Von der habe ich ohnehin keine Ahnung, was weiß ich, was die da veranstaltet.
    Doch wenn Du das in der Quelltextansicht vom Editor einfügst, dann brauchst Du das doch nur so eingeben, wie im letzten Beispiel.

  • Ich füge es über Beiträge -> Erstellen ein. So wie im Screenshot dargestellt.
    Leider, wenn ich es so mache, wie im Beispiel oben, wird kein Thumbnail mehr dargestellt. :(

  • Nehme mal Deinen Blog zur Hand, erstelle einen Beitrag nur zum Test, wechsle in die Ansicht Text und füge da mal weiter nichts ein als:

    HTML
    Ein Testbeitrag für Movies
    
    
    <!-- Quelltext-Schnipsel zum Einfuegen in Artikel/Beitrag -->
    <a href="http://ephox.bplaced.net/2013/08/speeding-motorcyclist-crashes-into-car"
    title="SPEEDING MOTORCYCLIST CRASHES INTO CAR" />
    <img src="http://i.imgur.com/70bE8kI.png" alt="MOTORCYCLIST CRASHING INTO CAR"
    style="width:226px; height:127px"/><br />
    SPEEDING MOTORCYCLIST CRASHES INTO CAR</a>
    <!-- Ende Quelltext-Schnipsel zum Einfuegen -->

    Habe es gerade unter Localhost probiert, wo es ohne Probleme funktionierte. Einziger Unterschied, da ich Deine CSS nicht habe, musste ich ein paar Angaben halt so wie Du siehst einfügen.

    Und wie ich gestern feststellte, braucht man die Vorschaubilder wohl nicht unbedingt zu speichern, sondern kann sich diese auch von YouTube in unterschiedlichen Größen abholen. Oder gibt es da Bedenken wegen Urheberrechten und Lizenzen?

    Code
    http://img.youtube.com/vi/-uYjP-D1GqE/default.jpg
    http://img.youtube.com/vi/-uYjP-D1GqE/mqdefault.jpg
    http://img.youtube.com/vi/-uYjP-D1GqE/hqdefault.jpg
    http://img.youtube.com/vi/-uYjP-D1GqE/sddefault.jpg
    http://img.youtube.com/vi/-uYjP-D1GqE/maxresdefault.jpg

    Einmal editiert, zuletzt von Melewo (29. August 2013 um 14:49)

  • Nehme mal Deinen Blog zur Hand, erstelle einen Beitrag nur zum Test, wechsle in die Ansicht Text und füge da mal weiter nichts ein als:

    HTML
    Ein Testbeitrag für Movies
    
    
    <!-- Quelltext-Schnipsel zum Einfuegen in Artikel/Beitrag -->
    <a href="http://ephox.bplaced.net/2013/08/speeding-motorcyclist-crashes-into-car"
    title="SPEEDING MOTORCYCLIST CRASHES INTO CAR" />
    <img src="http://i.imgur.com/70bE8kI.png" alt="MOTORCYCLIST CRASHING INTO CAR"
    style="width:226px; height:127px"/><br />
    SPEEDING MOTORCYCLIST CRASHES INTO CAR</a>
    <!-- Ende Quelltext-Schnipsel zum Einfuegen -->

    Habe es gerade unter Localhost probiert, wo es ohne Probleme funktionierte. Einziger Unterschied, da ich Deine CSS nicht habe, musste ich ein paar Angaben halt so wie Du siehst einfügen.

    Und wie ich gestern feststellte, braucht man die Vorschaubilder wohl nicht unbedingt zu speichern, sondern kann sich diese auch von YouTube in unterschiedlichen Größen abholen. Oder gibt es da Bedenken wegen Urheberrechten und Lizenzen?

    Code
    http://img.youtube.com/vi/-uYjP-D1GqE/default.jpg
    http://img.youtube.com/vi/-uYjP-D1GqE/mqdefault.jpg
    http://img.youtube.com/vi/-uYjP-D1GqE/hqdefault.jpg
    http://img.youtube.com/vi/-uYjP-D1GqE/sddefault.jpg
    http://img.youtube.com/vi/-uYjP-D1GqE/maxresdefault.jpg

    Erstmal vielen vielen Dank für die Mühe! :)
    Ich habe es so gemacht wie du es gesagt hast, nun sind aber mehrere Probleme aufgetaucht:
    1. Beim Thumbnail fehlt auf der Startseite der Playbutton
    2. Beim Klicken auf das Thumbnail kommt man zu einer Seite wo ein großer Screen vom Video angezeigt wird
    3. Erst wenn man auf den Screen des Videos klickt gelangt man zum Video

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!