HTML/Wordpress Video Header

  • Hallo zusammen,

    da meine Expertise im Webdesign zu wünschen übrig lässt, benutze ich momentan Wordpress um eine kleine Seite aufzusetzen.

    Kommen wir direkt zu meinem Problem:
    Ich würde gerne in den Startseiten-Header meiner Website ein Video einbetten. Der Header erstreckt sich über den gesamten Bildschirm und das Video soll im Hintergrund geloopt werden (momentan befindet sich dort ein Bild).
    Habe mich daran versucht, den Code der Header-Datei im Editor-Modus anzupassen (z.B. "iframe" integriert). Bisher leider erfolglos.

    Quelltext:

    <?php
    /**
    * The template for displaying the header.
    *
    * @package WordPress
    * @subpackage illdy
    */
    ?>
    <?php
    $img_logo = get_theme_mod( 'illdy_img_logo', esc_url( get_template_directory_uri() . '/layout/images/header-logo.png' ) );
    $text_logo = get_theme_mod( 'illdy_text_logo', __('Illdy', 'illdy') );
    $jumbotron_general_image = get_theme_mod( 'illdy_jumbotron_general_image', esc_url( get_template_directory_uri() . '/layout/images/front-page/front-page-header.png' ) );
    $preloader_enable = get_theme_mod( 'illdy_preloader_enable', 1 );
    ?>
    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    <?php if( $preloader_enable == 1 :( ?>
    <div class="pace-overlay"></div>
    <?php endif; ?>
    <header id="header" class="<?php if( is_front_page() :( echo 'header-front-page'; else: echo 'header-blog'; endif; ?>" style="background-image: url('<?php if( is_front_page() :( echo ( ( $jumbotron_general_image ) ? esc_url( $jumbotron_general_image ) : '' ); else: echo esc_url( get_header_image() ); endif; ?>');">
    <div class="top-header">
    <div class="container">
    <div class="row">
    <div class="col-sm-2">
    <?php if( $img_logo :( ?>
    <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" class="header-logo"><img src="<?php echo esc_url( $img_logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" /></a>
    <?php else: ?>
    <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" class="header-logo"><?php echo illdy_sanitize_html( $text_logo ); ?></a>
    <?php endif; ?>
    </div><!--/.col-sm-2-->
    <div class="col-sm-10">
    <nav class="header-navigation">
    <ul class="clearfix">
    <?php
    wp_nav_menu( array(
    'theme_location' => 'primary-menu',
    'menu' => '',
    'container' => '',
    'container_class' => '',
    'container_id' => '',
    'menu_class' => '',
    'menu_id' => '',
    'items_wrap' => '%3$s',
    'walker' => new MTL_Extended_Menu_Walker(),
    'fallback_cb' => 'MTL_Extended_Menu_Walker::fallback'
    ) );
    ?>
    </ul><!--/.clearfix-->
    </nav><!--/.header-navigation-->
    <button class="open-responsive-menu"><i class="fa fa-bars"></i></button>
    </div><!--/.col-sm-10-->
    </div><!--/.row-->
    </div><!--/.container-->
    </div><!--/.top-header-->
    <nav class="responsive-menu">
    <ul>
    <?php
    wp_nav_menu( array(
    'theme_location' => 'primary-menu',
    'menu' => '',
    'container' => '',
    'container_class' => '',
    'container_id' => '',
    'menu_class' => '',
    'menu_id' => '',
    'items_wrap' => '%3$s',
    'walker' => new MTL_Extended_Menu_Walker(),
    'fallback_cb' => 'MTL_Extended_Menu_Walker::fallback'
    ) );
    ?>
    </ul>
    </nav><!--/.responsive-menu-->
    <?php
    if( is_front_page() :(
    get_template_part( 'sections/front-page', 'bottom-header' );
    else:
    get_template_part( 'sections/blog', 'bottom-header' );
    endif;
    ?>
    </header><!--/#header-->


    Problematisch war es vor allem für mich, dass im Header per php-Funktion zwischen Start- und Blogseite unterschieden wird (nur auf Startseite gewünscht).


    Für eine einfache Lösung meines Problems, wäre ich euch unglaublich dankbar.

    MfG Doge

  • Ich kann dir da nicht helfe, weil programmieren nicht zu meinen Stärken gehört. Aber was mich interessieren würde, ist warum du da ein Video einbinden möchtest. Was bringt dir das?

  • naja normalerweise sieht sowas ja
    in etwa so aus..

    <body>
    <div id="wrapper">
    <div>
    <h4>Die Navigation</h4>
    <nav id="nav">
    <ul>
    <li> link 1</li>
    <li> link 2</li>
    <li> link 3</li>
    <li> link 4</li>
    <li> link 5</li>
    </ul>
    </nav>


    </div>


    <div id="vid-banner">
    <video width="990" id="bgvid" loop autoplay>
    <source src="../dein-Video.mp4" type="video/mp4" />
    <source src="../dein-Video.ogg" type="video/ogg" />
    </video>


    <div class="welcome text-center">
    <h1><span>Hier kommt Text oder so drüber wenn gewünscht</span></h1>
    <h1 >Willkommen </h1>
    <p><a href="#about">BEGIN</a></p>
    </div>
    </div>


    <div id="content">
    <h2>Hier gehts weiter mit Content bei bedarf..</h2>
    </div>
    </div>
    </body>

    und dann mit CSS wie gewünscht Positionieren alles...

    MfG