CODEWITHSUNDEEP
phphtmlcsswordpress
T.Doe
T.Doe

Reputation: 2035

Wordpress homepage reveal after video finishes playing

I'm working on a Wordpress theme where when visiting the homepage, a short animated video is played, and once it has finished playing it 'fades' away a reveals a static page of text and the header. I'm not quite sure how to achieve this but I've provided my code below.

home.php

<?php
/*
 * Template Name: Homepage
 */
get_header();
?>

<div id="primary" class="content-area offset-md-1 col-md-10">
    <main id="primary" class="site-main home-page">
        <div id="first">
            <video src="http://localhost:8888/myvideo.mp4" controls autoplay></video>
        </div>
        <div id="second">
            <div class="home-menu">
                <?php
                wp_nav_menu(
                    array(
                        'theme_location' => 'menu-1',
                        'menu_id'        => 'primary-menu',
                    )
                );
                ?>
                <p>Lorem Ipsum</p>
            </div>
        </div>
    </main><!-- .site-main -->
</div><!-- .content-area -->

<?php
get_sidebar();
get_footer();

style.css

Upvotes: 1

Views: 393

Answers (1)

rank
rank

Reputation: 2534

The video should be on top of the content first, so you can position it the right way using CSS in the style.css of your theme:

#first {
    width: 100%;  /* full screen width */
    height: 100vh; /* full screen height */
    position: absolute; top: 0; left: 0;/* stay in place */
    z-index: 1; /* sit on top */
    opacity: 1; /* it is fully visible */
    transition: 0.5s; /* time to move */
}
.leave {
    opacity: 0; /* it is invisible */
    width: 0; /* it has no width */
}
#first video {
    width: 100%; height: 100vh; /* video fit container */
}

We added a leave class for the hidden state after the video is loaded. That is all for the CSS part. Let's now get back to your page template file. We will use javascript to add the leave-class to the video, after it ended playing.

In Javascript you can use the addEventListener() method:

addEventListener("ended", yourScript);

In your html, you give an ID name to the video element: <video id="myVid" src...

With this having set, you can use the method and run a function when the video ends. Put this after your closing content-area div in the page template:

<script>
document.getElementById('myVid').addEventListener("ended", yourScript);
function yourScript(e){
    var div = document.getElementById("first"); /* div container */
    div.classList.add("leave"); /* add class to div */
}
</script>

This way your video gets the css class when it ended. In the CSS we took away the opacity and the width with a transition of 0.5 seconds. You can adjust it the way to like, this is just pure javascript and CSS.

There are also jQuery functions like fadeOut(500) if you prefer to use that.

Upvotes: 1

Related Questions