0

I have this code in my style.css

iframe[src*="http://www.youtube.com/"]
{width:480px !important; height:305px !important;padding-top: 20px;display:none}

as you can see, it makes youtube videos not to display. But I want to display videos in some time period (for example: from 2.00 AM to 2.00 PM). How to do it?

I have a theory, but I am not good at codes, so I am not able to do it myself.:

<this code work in some time period>
iframe[src*="http://www.youtube.com/"]
{width:480px !important; height:305px !important;padding-top: 20px;display:none}
</end of code>

<this code work in some time period>
iframe[src*="http://www.youtube.com/"]
{width:480px !important; height:305px !important;padding-top: 20px;}
<end of code>

Can anybody help me? Thanks a lot! :)

3

You could filter body_class and add a time depending class:

add_filter( 'body_class', 'time_body_classes' );

function time_body_classes( $classes )
{
    $classes[] = 'time-' . date( 'a' ); // time-am or time-pm
    $classes[] = 'time-' . date( 'H' ); // time-02 or time-17

    return $classes;
}

Then you can make the CSS selector more specific:

.time-am iframe {
}
.time-02 iframe,
.time-03 iframe,
.time-04 iframe,
.time-05 iframe 
{
}

Be aware the body classes will not change if you use a caching plugin.

2

Are you talking about server time or user time?
In the first case, just use toscho's answer, while in the second case, you might want/have to use JavaScript to determine the time and act upon that. For instance like so:

jQuery(document).ready(function($) {
    // Add body class depending on current time
    var currentTime = new Date().getHours();
    $('body').addClass('time-'+currentTime);
});

Either put the above code in one of your existing (and enqueued) JS files, or create a new JS file, put the code inside and enqueue it.

// EDIT
If you want to remove/hide something, you can also use JavaScript to do so:

jQuery(document).ready(function($) {
    // Hide element depending on current time
    var currentTime = new Date().getHours();
    if (6 < currentTime && currentTime < 20)
        $('iframe.night-only').remove(); // or hide();
});
2

Hiding a video with CSS can problematic, whether that CSS is added via PHP or Javascript.

  1. The videos all load on the page anyway, at least the preview does. If you watch the request via HttpFox, or a similar tool, you can see a request to youtube.com (for example) for each video even though only one is visible on the page.
  2. And it is a trivial edit with FireBug to see the videos anyway.

So it is neither efficient nor secure. Of course, security in the strictest sense may not really be an issue, but the point is that the control is less absolute than it could be.

It is also easy to get around Javascript imposed solutions, just by disabling Javascript in the browser.

My suggestion is to use a shortcode to control the display of your content.

function time_restricted_output($atts, $content) {
  $hour = date('H',current_time('timestamp'));
  $start = (!empty($atts['start'])) ? $atts['start'] : 0;
  $end = (!empty($atts['end'])) ? $atts['end'] - 1 : 23;
  if ($hour >= $start && $hour <= $end) {
    return '<p>Awesome Content: "'.$content.'" for between the hours of '.$start.' and '.($end + 1).' each day.</p>';
  }
}
add_shortcode('timelc','time_restricted_output');

Then in your post you use [timelc start="00" end="12"]<content><[/timelc]

The shortcode could easily be modified to create your iframe so all you would need to do is pass the URL.

This will control the content based on server time. If you need user's machine time, there aren't a lot of options besides Javascript.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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