Plugin und Code zum Einbinden von YouTube Videos

In diesem Beitrag möchten wir Ihnen ein Plugin vorstellen, mit dem Sie ein Video von YouTube vor einen abgedunkelten und zugleich transparenten Hintergrund öffnen können. Dabei geht es weniger um den praktischen Einsatz des Plugins, sondern vielmehr um mögliche Lösungsansätze zur Entwicklung eines geeigneten Plugins.

Übersicht, Varianten und Code-Listing:

• Ein Hinweis zum Video
• Einbinden mit und ohne Plugin
• Code-Listing für ein einfaches Plugin

Vorbemerkung

Wir möchten ausdrücklich betonen, dass der hier vorgestellte Code bislang nur für erste Tests gedacht ist und obwohl voll funktionsfähig, noch nicht in bestehende Projekte verwendet werden sollte. So reagiert bei dieser einfachen Variante das Script auf eine veränderte Fenstergröße erst nach einem Refresh der Seite und die angezeigte Größe des Videos passt sich noch nicht kleineren Screens von mobilen Endgeräten an, so dass diese Variante für Seiten mit responsiven Webdesign ungeeignet ist.

<?php
/*--------------------------------------------------------------------------------------------
 Plugin Name: HM-MovieBlende
 Plugin URI:  http://www.coder-welten.com/einbinden-von-youtube-videos/
 Description: Ein kleines Plugin zum Einbinden von YouTube Videos mit Short-Tag [movie_von_youtube]
 Author:      Horst Müller
 Version:     Beta 1.00
 Author URI:  http://www.coder-welten.com
 Datum:       01. September 2013
 License:     GPL v2 und Lizenz für Software

 *  PHP- und HTML-Code stehen unter der GNU General Public License (GPL) Version 2
 *  http://www.gnu.org/licenses/gpl-2.0.txt
 *  JavaScript- und CSS-Code stehen unter der Lizenz für Software vom Verlag
 *  http://www.coder-welten.de/projekte/lizenz-fuer-software.htm

 Copyright:   © 2006/2013 - Verlag Horst Müller - Stendal
----------------------------------------------------------------------------------------------
*/
function einbinden_von_youtube_videos() {

    $movie  = "YCFXGanTx4A";
    $bcolor = "be792e;";
    ob_start();
?>
<div id="movie01"
    style="position:fixed; background-color:#<?php echo $bcolor; ?>; border:8px solid #<?php echo $bcolor; ?>; border-radius:4px; display:none">
    <p style="text-align:center; margin:0px"><iframe id="movie02" src="http://www.coder-welten.com/intern/movies/laden.html"
    style="width:480px; height:360px; border:none; overflow:hidden; margin:2px; display:none" allowfullscreen></iframe><br />
    <a href="javascript:beendeMovie()" style="text-decoration:none; color:#fff">» Schließe Movie «</a></p>
</div>
<div id="<?php echo $movie; ?>"
    style="position:relative; width:246px; height:220px; margin-left:auto; margin-right:auto; padding-top:20px; border:none">
    <p style="text-align:left; margin:3px"><a href="javascript:blendeMovieEin('<?php echo $movie; ?>')">
    <img src="http://img.youtube.com/vi/<?php echo $movie; ?>/hqdefault.jpg" alt="Ein Bild"
    style="position:absolute; width:240px; height:180px; margin-left:0px;border:none" />
    <img src="http://www.coder-welten.com/wp-content/plugins/movieblende/moviestart.gif" alt="Start"
    style="position:absolute; margin-left:100px; margin-top:72px; width:36px; height:36px; border:none" /></a></p>
    <p style="text-align:center; margin-top:192px"><a href="javascript:blendeMovieEin('<?php echo $movie; ?>')"
    style="text-decoration:none">» Starte Movie «</a></p>
</div>
<div id="movie03"
    style="width:1px; height:1px; background-color:#000; opacity:0.80; filter:alpha(opacity=80); display:none">
</div>

<script type="text/javascript">
"use strict";
function blendeMovieEin(imgmovie) {

    var movie01 = document.getElementById("movie01");
    var movie02 = document.getElementById("movie02");
    var movie03 = document.getElementById("movie03");
    var dweite;
    var dhoehe;

    if (window.innerWidth) dweite = window.innerWidth;
    else if (document.documentElement.clientWidth) dweite = document.documentElement.clientWidth;
    var leftpad = (dweite - 500) / 2;
    if (leftpad < 2) leftpad = 1;

    if (window.innerHeight) dhoehe = window.innerHeight;
    else if (document.documentElement.clientHeight) dhoehe = document.documentElement.clientHeight;
    var toppad = (dhoehe - 420) / 2;
    if (toppad < 2) toppad = 1;

    movie01.style.zIndex     = 310;
    movie01.style.display    = "block";
    movie01.style.left       = leftpad +"px";
    movie01.style.top        = toppad  +"px";
    movie01.style.width      = "484px";
    movie01.style.height     = "400px";

    movie02.src = "http://www.youtube-nocookie.com/embed/"+imgmovie;
    movie02.style.display = "inline";

    movie03.style.position   = "fixed";
    movie03.style.zIndex     = 309;
    movie03.style.width      = "100%";
    movie03.style.height     = "100%";
    movie03.style.top        = "0px";
    movie03.style.left       = "0px";
    movie03.style.display    = "block";

    window.scrollTo(0, 0);
    document.getElementsByTagName("html")[0].style.overflow = "hidden";
    document.getElementsByTagName("body")[0].style.overflow = "hidden";
}
function beendeMovie() {

    var movie01 = document.getElementById("movie01");
    var movie02 = document.getElementById("movie02");
    var movie03 = document.getElementById("movie03");

    movie01.style.display  = "none";
    movie02.style.display  = "none";
    movie02.src = "#";

    movie03.style.position = "relative";
    movie03.style.zIndex   = 1;
    movie03.style.width    = "1px";
    movie03.style.height   = "1px";
    movie03.style.display  = "none";

    document.getElementsByTagName("html")[0].style.overflow = "auto";
    document.getElementsByTagName("body")[0].style.overflow = "auto";
}
</script>
<?php
    $output_string = ob_get_contents();
    ob_end_clean();
    return $output_string;
}
add_shortcode("movie_von_youtube", "einbinden_von_youtube_videos");
?>