Eines der Probleme, die diese Migration auf Octopress aufwarf, war, dass YouTube-Videos mit dem aktuellen iframe-Embed-Snippet nicht korrekt gerendert wurden. Statt des Videos wurde einfach der HTML-Quelltext des Snippets angezeigt.

Wenn man die Videos, so wie auf der Octopress Video Testpage gezeigt, auf einer Seite mit der Dateiendung .html einbettet, so ist alles total in Ordnung. Den Quelltext dieser Seite kann man sich praktischerweise direkt auf GitHub anschauen. Die Endung .html sorgt dafür, dass der Inhalt der Seite ohne Behandlung direkt als HTML durchgereicht wird. Benutzt man stattdessen .markdown als Dateiendung, so wird der Post durch den konfigurierten Markdown-Parser gejagt und von diesem in HTML konvertiert…

So kam ich drauf, dass Octopress an sich gar nicht das Problem ist, sondern der von mir verwendete Markdown-Renderer, Kramdown¹, der eigentliche root cause ist…

Der Bug ist in der Tat bereits bekannt und hier sowie hier dokumentiert. In der nächsten Version soll das Problem behoben werden:

The next version of kramdown will allow boolean attributes like “allowfullscreen” to be specified. This should fix your problem and make kramdown more resilient.

Bis dieses Problem also gefixt ist, werde ich zukünftig nach dieser Anleitung vorgehen²: Einfach ein paar invalide Statements aus dem Embed-Code von Youtube rauswerfen, noch ein class für eventuelles CSS-Styling hinzufügen und schon klappt das.

Um also ein YouTube-Video mit Octopress und Kramdown darzustellen muss man aus:

1

<iframe width="420" height="315" src="http://www.youtube.com/embed/5UGlrBvUOt4" frameborder="0" -allowfullscreen></iframe>

Die validere Form bauen:

1

<iframe class="youtube-player" width="420" height="315" src="http://www.youtube.com/embed/5UGlrBvUOt4"></iframe>

Dann klappt das schon sehr gut.

Um jetzt noch die Tiparbeit zu sparen, die nötig wäre um jedes Embed einzeln zu fixen, habe ich mir dieses Octopress Youtube-Liquid-Template besorgt und wie folgt angepasst:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

module Jekyll
  class Youtube < Liquid::Tag
    @@width = 420
    @@height = 315

    def initialize(name, id, tokens)
      super
      @id = id
    end

    def render(context)
      %(<iframe width="#{@@width}" height="#{@@height}" src="http://www.youtube.com/embed/#{@id}"></iframe>)
    end
  end
end

Liquid::Template.register_tag('youtube', Jekyll::Youtube)

Das so gefixte Plugin landete dann als youtube.rb im plugin-Ordner von instant-thinking. Youtube-Videos können nun einfach so mit der YouTube-ID als einziger Angabe eingebunden werden:

{% youtube 5UGlrBvUOt4 %} 

Das spart einem faulen Menschen wie mir³ sehr viel Tipparbeit und schon sind Olli und Stefan valide eingebunden und im Bilde:

Die Videos die aktuell kaputt eingebettet sind: Da werden sicher ein paar Zeilen grep, sed oder ack und awk weiterhelfen können… So etwas ist in Textdateien ja sehr komfortabel zu fixen.

Wieder ein Punkt weniger auf der ToDo-Liste.