in header

  • I’m trying to put a video in my header and i can’t seem to get it to work. I’m trying to make the background image the video, with a static logo over. The header currently looks like this…

    <div id=”header”>

    <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?>

    <div id=”custom-header” <?php if ( has_nav_menu( ‘fixed-menu’ ) ) { ?>class=”fixed-menu”<?php } ?> style=”background-image: url(<?php header_image(); ?>);” data-type=”background” data-speed=”10″>

    <?php get_template_part( ‘content/logo’, ‘title’ ); ?>

    <img class=”hide-img” src=”<?php header_image(); ?>” height=”<?php echo get_custom_header()->height; ?>” width=”<?php echo get_custom_header()->width; ?>” alt=”<?php echo esc_attr( get_bloginfo() ); ?>” />

    </div>

    <?php } else { ?>

    <div id=”custom-header” class=”non-active<?php if ( has_nav_menu( ‘fixed-menu’ ) ) { ?> fixed-menu<?php } ?>”>

    <?php get_template_part( ‘content/logo’, ‘title’ ); ?>

    </div>

    <?php } ?>

    Any idea how I should go about this?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi,

    Can you post some links to your current website, so that we can help you with the code around it?

    Additionally, what theme are you using?

    Regards,
    Ramesh

    PS: Please don’t edit any theme directly. Create a child theme and make changes so that you don’t loose any customization when you do a theme upgrade.

    Thread Starter C0Connor

    (@c0connor)

    This is the site in development… https://ada.d8f.myftpupload.com/
    I’m using Swell Lite

    Hi,

    For ease of use, I am suggesting a method where the video is fixed (i.e. not an option to edit via the admin backend). You must remove the header image from the theme customiser for this to work.

    <div id="header">

<?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?>

....leave code as is....

<?php } else { ?>

<div id="custom-header" class="non-active<?php if ( has_nav_menu( 'fixed-menu' ) ) { ?> fixed-menu<?php } ?>">

<video autoplay loop poster="{cover-image-for-video}" id="bgvid">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

<?php get_template_part( 'content/logo', 'title' ); ?>

</div>

<?php } ?>

    Associated CSS

    video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

    The full details of including video can be found at this URL – https://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

    I have tried to give you an idea of where you need to add your code.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘in header’ is closed to new replies.