WordPress: Countdown before opening the post?

Question

I searched and found some html, jquery or javascript redirect counters, but I don't know can I use it with wordpress. I want to make visitors wait 20 seconds before opening the post (shortcode), and logged in will see post (shortcode).

Like this:

function restrict( $atts, $content = null ) {
if ( is_user_logged_in() ) {
    return '<p>I am logged and I can see this</p>';
} else {
    echo HERE SHOULD BE THAT COUNTER;
}}
add_shortcode( 'restrict', 'restrict' );

Update: Using given answer I tried:

function restrict( $atts, $content = null ) {
$cnt = "http://www.youtube.com/embed/HESJgpYYUyM";
if ( is_user_logged_in() ) {
?>
<div class="video" style="display:none;"><iframe width="100%" height="400" src="<?php echo $cnt; ?>?autoplay=1" frameborder="0" scrolling="no" allowfullscreen style="visibility:hidden;" onload="this.style.visibility=\'visible\';"></iframe><br><br></div>
<div class="wait">Please wait 20 seconds.</div>
<script type="text/javascript">
$(document).ready(function() {
    $(".wait").delay(10000).hide(0, function() {
        $(".video").show();
    });
});
</script>
        <?php
}}
add_shortcode( 'restrict', 'restrict' );

*

Uncaught TypeError: Property '$' of object [object Object] is not a function 
Refused to display 'http://www.youtube.com/embed/HESJgpYYUyM' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Uncaught SyntaxError: Unexpected token ILLEGAL 

*

So far:

function restrict( $atts, $content = null ) {
$cnt = "http://www.youtube.com/embed/HESJgpYYUyM";
if ( is_user_logged_in() ) {
?>
<div class="video" style="display:none;"><iframe width="100%" height="400" src="<?php echo $cnt; ?>?autoplay=1" frameborder="0" scrolling="no" allowfullscreen style="visibility:hidden;" onload="this.style.visibility=\'visible\';"></iframe><br><br></div>
<div class="wait">Please wait 20 seconds.</div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".wait").delay(10000).hide(0, function() {
        jQuery(".video").show();
    });
});
</script>
        <?php
}}
add_shortcode( 'restrict', 'restrict' );

Uncaught SyntaxError: Unexpected token ILLEGAL

Answer 1

Your code is pretty much correct. Here I've highlighted where you have to place your code. You need to place this code in your functions.php.

function restrict_func() {
    if ( is_user_logged_in() ) {
        return '<p>I am logged and I can see this</p>';
    } else {
        ?>
        <script>
            jQuery(document).ready(function() {
                // script code here.
            }
        </script>
        <!-- And HTML HERE, I've added sample HTML below -->
        <p class="hide_after_20_sec"></p>
        <p class="show_after_20_sec"></p>
        <?php
    }
}
add_shortcode( 'restrict', 'restrict_func' );