Videos für Druckansicht stylen mit YouTube Lyte

Vor einiger Zeit hatte ich beschrieben, wie ich die Druckansicht meiner eingebetteten YouTube-Videos gestylt habe. Nachdem ich nun das Plugin WP YouTube Lyte einsetze, werden die Videos leider mit komplett anderem HTML und ohne Aufruf des embed-Hooks auf der Seite angezeigt, so dass meine damalige Lösung so nicht mehr funktioniert. Hier ist also eine angepasste Version.

So sieht die Druckansicht eines eingebetteten Videos vor meinen Änderungen aus:

Druckansicht vorher

Man versteht, dass an der Stelle ein Video stand, weiß aber nicht genau, welches das war. Zum Glück bietet das YouTube-Plugin einen Filter an, mit dem man das fertige HTML anpassen kann. Meine entsprechende Funktion habe ich in meinem Funktions-Plugin abgelegt, es geht aber auch die functions.php eines Themes:

/**
 * Makes the URL readable in the print view under a YouTube video (for plugin WP YouTube Lyte).
 * 
 * @param string $html The html of the embed output.
 * 
 * @return string The possible modified html of the embed output.
 */
function joy_lyte_match_postparse_template($html) {
	// Add a line below it that contains the video's URL.
	$matches = array();
	if ( preg_match('/ href="([^"?]+)["\?]/', $html, $matches) ) {
		$video_url = $matches[1];
		return $html . '<p class="print_only">Video: ' . $video_url . '</p>';
	}
	return $html;
}

add_filter('lyte_match_postparse_template', 'joy_lyte_match_postparse_template');

Der Code ist relativ einfach: An zwei Stellen im generierten Code des Videos steht ein Link-Element mit dem Link zum Video. Diesen parsen wir dort heraus (welche der beiden Stellen wir erwischen, ist egal) und fügen eine neue Zeile unter dem Video ein.

Die CSS_Klasse „print_only“ hatte ich in meinem ersten Beitrag zum Thema bereits eingeführt. Sie versteckt ihre Inhalte bei der normalen Seitenausgabe:

.print_only {
  display: none;
}

Wie bisher wird dann in einer Sektion des Stylesheets, welche nur für die Druckansicht gilt, dieser Inhalt wieder angezeigt:

@media print {
  /* show stuff with class in the print view */
  .print_only {
    display: block;
  }
  
  /* print the video frame smaller */
  .lyte-wrapper {
    max-height: 100px;
    border: 1px #000000 dashed;
  }
  
  .lyte.lP {
    padding-bottom: 100px;
  }
  
  /* hide absolutely positioned stuff to avoid overlays, hide original subline */
  .lyte .play,
  .entry-content .lL {
    display: none;
  }
  
  // andere Style-Angaben für die Druckausgabe...
}

Die beiden Angaben danach sorgen dafür, dass das Video in der Druckansicht nicht so sinnlos hoch dargestellt wird und stattdessen einen sichtbaren Rahmen bekommt. Die letzte Angabe blendet ein Element aus, welches das Plugin absolut positioniert und welches deswegen auch in der Druckansicht den nachfolgenden Text verdeckt. Außerdem wird die Original-Unterzeile des Videos („Dieses Video ansehen auf YouTube“) versteckt, da wir ja eine neue Zeile ausgegeben haben.

Das Ergebnis sieht dann z.B. so aus:

Druckansicht nachher

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte beachte die Kommentarregeln: 1) Kein Spam, und bitte höflich bleiben. 2) Ins Namensfeld gehört ein Name. Gerne ein Pseudonym, aber bitte keine Keywords. 3) Keine kommerziellen Links, außer es hat Bezug zum Beitrag. mehr Details...

So, noch mal kurz drüber schauen und dann nichts wie ab damit. Vielen Dank fürs Kommentieren! :-)