jQuery(function() { /* onReady */
	var $ = jQuery; 

	// 16:9 ( Spielfilm-Format [ Hany, Laptop, etc auch] )
	$( '.video_player_wrapper iframe' ).lh_resize_videoplayer();
	
	// 21:9 ( Kino-Format )
	$( '.video_player_wrapper iframe' ).lh_resize_videoplayer( { 'width' : 21 } );
	
	// 4:3 ( Foto-Format )
	$( '.video_player_wrapper iframe' ).lh_resize_videoplayer( { 'width' : 4, 'height' : 3 } );
	
	// Finde Youtube-Player Iframes
	$( 'iframe[src^=\'https://www.youtube/\']' ).lh_resize_videoplayer();
	
});
Beispiele für die Anwendung im onReady-Call 
/**
 * @summary Passt Video-Iframe auf 16:9 an.
 *
 * Das Script ermittelt die Breite des Iframes und 
 * setzt die Höhe dann auf die relative Höhe für 
 * ein 16:9 Seitenverhältnis.
 *
 * @param json $ratio_arg Optional. { 'width' : BREITE, 'height' : HÖHE, } - Eigenes Seitenverhältnis.
 * 
 * @listens document:ready
 * @listens window:resize
 *
 */
jQuery.fn.lh_resize_videoplayer = function( ratio_arg ) {
	var $           = jQuery;
    var this_player = $( this );
    var ratio       = { /* Default, 16:9 Verhältnis */
    	'width'  : 16,
    	'height' : 9,
    };
    jQuery.extend( ratio, ratio_arg );
    
    /* Resize Function */
    function resize_player( target_player, ratio ) {
	    var player_width  = target_player.width();
		var player_height = ( player_width / ratio.width ) * ratio.height;
		target_player.height( player_height );
    };
    
    /* Größe ändern bei 'On Ready' */
    resize_player( this_player, ratio );
    
    /* Größe ändern nach Window Resize */
    $( window ).on( 'resize', function(){ 
    	resize_player( this_player, ratio );
    });
};
Das Mini-Plugin, einfach in eine Javascript File packen

Responsive Youtube Player für das Theme per jQuery

Videoplayer auf Website sind immer bisschen anstrengend – Sie sind einfach nicht so super einfach einbaubar wie Bilder. Der Youtube Player, den man per Embed-Code zum Beispiel bekommt liegt in einem Iframe. Diesen kann man mit max-width:100% zwar anpassen, dass immer die Container-Breite einfängt, jedoch zerstört es dann oft das Seitenverhältnis.

Es gibt bisher keine CSS Klasse um einem Container zu sagen, dass die Breite variabel ist, er aber die Höhe im gleichen Verhältnis anpassen soll. Gerade in den heutigen Zeiten mit Handys, Tablets und verschiedenen Screengrößen ist es gut, wenn ein Youtube Video in einem WordPress Theme sich auch responsive anpasst.

Ich hab für mein WordPress Theme ein jQuery Script geschrieben, welches den Iframe von Youtube immer in einem festen Seitenverhältnis responsive anpasst. Das Script im ersten Code-Block ist ein Mini-Plugin für jQuery. Einfach nach jQuery in das Theme einbetten.

Der Aufbau des Responsive Player Plugins

Das jQuery Script ist recht simpel aufgebaut. Im ersten Block des Responsive Player Plugins wird der Short-Handle $ für jQuery registriert, das HTML-Ziel-Objekt festgehalten ( this_player ) und ein Default-Wert für das Seitenverhältnis gesetzt. Die Default-Werte sind jetzt 16:9, wie die meisten Fernseher, Handys und Computer Screens.

Im zweiten Block definieren wir die Funktion resize_player() – weil wir öfters die Größe des Iframes anpassen müssen, lohnt es sich eine Funktion zu definieren. Falls wir später was ändern oder erweitern müssen, muss nur an einer Stelle der Code bearbeitet werden.

Im letzten Block wird die Resize Funktion aufgerufen, dass nach dem Rendern der Seite, direkt der Player angepasst wird. Wir definieren noch einen zweiten Event-Listener, der immer aufgerufen wird, falls die Fenstergröße verändert wird. Wenn die Fenstergröße verändert wird, ändert sich eventuell die Breite des Players und die Höhe muss neu berechnet werden.

Aufruf des Plugins für Youtube Player

Wenn der Code eingebaut wurde, kann er wie jede andere jQuery Funktion auf HTML Objekte angewendet werden, eben auf auf Iframe Youtube Player. Einfach in die onReady Funktion der main.js von deinem Theme die entsprechenden HTML Objekte mit Selektor verknüpfen – Siehe zweiten Code-Block.

Man kann dem Aufruf optional noch ein eigenes Seitenverhältnis mit lh_resize_videoplayer( { ‚width‘ : BREITE, ‚height‘ : HÖHE } ); Falls man z.B. ein 4:3 Video hat, oder dummerweise das Handy hochkant gehalten hat.

Tipp „Youtube Player Iframe Selektor“ : Wer kein eigenes Theme geschrieben hat und nicht wie in den Beispielen auf einen Wrapper-Div zurück greifen kann, kann auch mit einem Selektor den Youtube-Iframe finden. Der Selektor lautet: ‚iframe[src^=\’https://www.youtube/\‘]‘ – Was dieser macht ist, nach jedem Iframe suchen, der als SRC-Attribut mit der Youtube-URL beginnt. Siehe letztes Beispiel im Code Block.

25. Oktober 2017 | Wordpress