Title: in header
Last modified: August 30, 2016

---

# in header

 *  [C0Connor](https://wordpress.org/support/users/c0connor/)
 * (@c0connor)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/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)

 *  [abytecurious](https://wordpress.org/support/users/abytecurious/)
 * (@abytecurious)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/in-header/#post-6592655)
 * 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](https://wordpress.org/support/users/c0connor/)
 * (@c0connor)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/in-header/#post-6592659)
 * This is the site in development… [http://ada.d8f.myftpupload.com/](http://ada.d8f.myftpupload.com/)
   
   I’m using Swell Lite
 *  [abytecurious](https://wordpress.org/support/users/abytecurious/)
 * (@abytecurious)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/in-header/#post-6592718)
 * 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 – [http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video](http://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.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [abytecurious](https://wordpress.org/support/users/abytecurious/)
 * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/in-header/#post-6592718)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics