Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I would like to add a video (autoplay) before the visitor go into my wp blog (maybe just the homepage, not every post), how could this be possible? I think javascript maybe the best choose?

Could you give your solution (no matter js or not) in detail?


EDIT:

After a while, I think this should work for me, but the fact is not, why?

document.write('<style type="text/css">\n\
 #wrapper, #header, #footer{ display:none;}\n\
 </style>\n\
 <video id="loadDiv" preload="auto" data-setup="{}" loop="loop"\
 webkit-playsinline="" style="position: absolute; width: 100%" autoplay=""\
  src="http://srcofvideo">\
 </video>'
);

window.onload = function() {
 setTimeout(function () {
document.getElementById("loadDiv").style.display = "none";  
document.getElementById("wrapper").style.display = "block";
     document.getElementById("header").style.display = "block";
     document.getElementById("footer").style.display = "block";
 },10000)}
share|improve this question
    
Do you also want the homepage to still function as the blog roll? Or do you want your home page to just be the static video and then have the pages and single posts and all that jazz on the inner site like normal? –  Ronburgundy Jul 19 '13 at 12:45
    
I mean the video only show for loading the homepage, and after load all the staff, this shall not show anymore, including loading for posts and so on. –  van abel Jul 19 '13 at 12:53
    
Do you want it to be a popup or would you be happy with a redirect to a page and have the video on that page? Also can you use youtube for the player or do you want a local solution? –  Ronburgundy Jul 19 '13 at 13:09

3 Answers 3

My suggestion :

  1. Make a specific video splash template inside of your WordPress theme incorporating a link to visit the rest of your site.
  2. Put in your web directory a specific CSS file for full screen video support.
  3. Make a new empty page using the splash template and use this page as your homepage in your WordPress blog or website.

Technical details :

*Use and adapt this code for making your video splash template and save it as "splash.php" and put this in your Wordpress theme folder - More background info can be found here: http://codex.wordpress.org/Page_Templates -->*

<?php
/*
Template Name: Splash
*/
?>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Pe Vermeersch</title>
    <meta name = "description" content="My website"/>
    <meta name = "keywords" content="My keywords"/>
    <link rel="stylesheet" type="text/css" href="css/video.css" />

<style type="text/css">
<!--
body {
background-image: url('images/background.jpeg');
background-color: #000000;
}
.style2 {color: #666666}

.style1 {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
}
    </style>
<!--SPLASH page -->
</style><title>Splash</title></head>

<body>
<!--Just change video source here, leave type="" intact, all video types needed for     browser compatability-->
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted     volume="0">
        <source src="videos/splash.mp4" type="video/mp4"/>
        <source src="videos/splash.webm" type="video/webm"/>
        <source src="videos/splash.ogv" type="video/ogg ogv";     codecs="theora, vorbis"/>
        Video not supported. 
</video>
<p align="center" class="style1">enter website <a     href="http://www.my_wordpress_site.org/news/">here</a></p>
<div class="footer"></div>
</body>

Use this CSS code for making your spash video full screen and save it as "css/video.css" in your CSS directory -->

#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width:100%;
min-height:100%;
max-height:4000%;
max-width:1000%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

As an example see my own Wordpress site with video splash page using the code above :

http://www.pe-vermeersch.com

share|improve this answer
function ron_redirect_to_vid() {
if(get_transient('ron_first_visit_'.$user->ID) === false){
set_transient('ron_first_visit_'.$user->ID, 1, 60*60*5);
//set a transient to remember the user logging in for 5 hours
//change the 5 to the number of hours you want to wait to show user the video again
wp_redirect(site_url().'/PAGE_NAME_HERE/');
exit;
  }
}
add_action('wp_login', 'ron_redirect_to_vid');

This solution looks to redirect the user after login to a page, or a post, or where ever if the transient value is set. This transient is set to remember the user for 5 hours. After the 5 hours WordPress deletes the transient.

If a user logs in and there is a not a transient representing them then the function creates a transient, remembers it for 5 hours, and then redirects the user to the desired page.

get_transient() should return false if there is no transient or if there is a problem, so if the script fails the user will be redirected to your video page.

You should include a link back to your homepage on the page that the user is redirected to, and embedd the video on the page that the function redirects to.

share|improve this answer

Show a popup link on the home page.

first you need thickbox and jquery on your front end.

Put this in your functions.php:

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}
if (!is_admin()) add_action('init','my_thickbox');
function my_thickbox(){
    wp_enqueue_script('thickbox',null,array('jquery'));
    wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
}

Then put this in your footer.php preferable after <?php wp_footer() ?> :

<?php if(is_home()){ ?>
<div id="my-content-id" style="display:none; text-align: center;">
     <iframe width="560" height="315" src="//www.youtube.com/embed/7p34hxIHrGM" frameborder="0" allowfullscreen></iframe>
</div>
<script type="text/javascript">
if ( typeof tb_pathToImage != 'string' )
{
    var tb_pathToImage = "<?php echo get_bloginfo('url').'/wp-includes/js/thickbox'; ?>/loadingAnimation.gif";
}
if ( typeof tb_closeImage != 'string' )
{
    var tb_closeImage = "<?php echo get_bloginfo('url').'/wp-includes/js/thickbox'; ?>/tb-close.png";
}
</script>
<script type='text/javascript'>
$(document).ready(function(){
tb_show("","#TB_inline?width=575&height=350&inlineId=my-content-id", "");
});
</script>
<?php } ?>

You can put whatever you want to display in the my-content-id division. Right now it shows one of my youtube videos. But you could put a js player here or a youtube or vimeo video. A youtube or vimeoembedd would be much more simple.

share|improve this answer
    
Can we have a pure js script that I will put it into WP_head –  van abel Jul 20 '13 at 1:20
    
The proper way of doing this involves using php to enque the scripts and php to determine if you are on the homepage. With wordpress you should not go pasting css links and js scripts around inline in templates. –  Ronburgundy Jul 20 '13 at 1:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.