How to embed YouTube Videos as Valid XHTML 1.0 ?

Youtube embed code help us to embed the youtube videos in our webapge. The youtube embed code is similar as follows.

<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/me0zQaMqhPY?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/me0zQaMqhPY?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

If we embed the youtube embed code in our html page, normally we fails in the w3c validation. If we validate this page we can see that the error is because of the <embed> tag. The <embed> tag inserts a non-standard object or external content (typically non-HTML) into the document.

To remove the errors from the webapge we can remove the <embed> tag. The code is similar as follows.

<object type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/v/me0zQaMqhPY"><param name="movie" value="http://www.youtube.com/v/me0zQaMqhPY"></object>
This will remove the w3 error message.

We can add the wmode by adding the following code

<param name="wmode" value="transparent">

You can set the autoplay feature by adding the autoplay parameter in the url.
&autoplay=1
like as follows

data="http://www.youtube.com/v/me0zQaMqhPY&autoplay=1"

Pagination in wordpress

If we have a large number of posts in wordpress , its not good to list all posts in a single page. So we need to restrict the listing of the posts. The query_posts() returns posts from the database . The main disadvantages of query_posts() is the lack of pagination .We can use parameters to change the listing of posts. Suppose we have a number of 50 posts in our site, it’s better to use pagination in the site. Here am trying to explain about how to use pagination in wordpress with query_posts().

First we need to install a plugin for pagination. We can use WP-Paginate plugin for pagination. We can download the plugin from the following link http://wordpress.org/extend/plugins/wp-paginate/ and install the plugin.

Add the following code in the page where you want to set pagination links.

<div class="navigation_nav">
<?php if(function_exists('wp_paginate')) {
wp_paginate();
} ?></div>

The above code will generate pagination navigation in the post page.

Next is to set the parameters for the query_posts(). We need to get the current page number and the pagination page number.

Add the following code before query_posts() to get the page number.

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

The above code get the page number from the GET variables. If the variable is not set , the page number is set to 1;

Next we need to pass the parameters to query_posts(). Use the following code to pass the parameters to query_posts().

query_posts("&paged=".$paged)

This will display a pagination link in the post page. We can set the number of posts to display by setting the 'posts_per_page' variable.
Similar as follows

query_posts("&paged=".$paged."&posts_per_page=10")

Also we can set the property in the admin side.

To set the post per page using admin panel

Go to Settings -> Select Reading -> edit 'Blog pages show at most' to your number.

But priority for post per page will be with the code that we added in the page.

Full source code:

After applying the codes the page will be similar as follows.

<?php
// get the page number and get the posts
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$q = "paged=".$paged.'&posts_per_page=2';
query_posts($q);
?>

<div class="navigation_nav">
<?php
// pagination links
if(function_exists('wp_paginate')) {
wp_paginate();
} ?></div>

<?php
// listing of posts
if (have_posts()) :
while (have_posts()) : the_post();
$custom_fields = get_post_custom(get_the_ID());
?>

Static DIV in a webpage

For an html object, there are five position properties: static, relative, absolute, fixed and inherit.
We can use fixed property to set a DIV fixed in a webpage and stays in the same place while scrolling.
The IE6 does not support position: fixed and shows it in the position following this text where it has been coded and it will scroll.

A position: fixed div needs to be positioned with regard to the intended viewport size. A div with position: fixed; top: 700px will never show on a screen resolution of 800 x 600 and scrolling will not make it appear.

The code is

<div id="static1">static DIV</div>

The styles are:-

#static1 { position: fixed; top: 95px; left: 30px; width: 220px; height: 40px; background-color:#00CCFF; }

Full Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Static DIV</title>
<style>
#static1 {
background-color:#00CCFF;
height:40px;
right:5px;
position:fixed;
bottom:5px;
width:220px;
}
</style>
</head>
<body>
<div id="static1">Static DIV</div>
<div style="height:1000px;">
page contents
</div>
</body>
</html>