How to make a video play for homepage?

0 Views

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?

Read More

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)}
Post Views: 0

Related posts

3 comments

  1. 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

  2. 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.

  3. 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.

Comments are closed.