Youtube Section

Create A YouTube Section With WordPress

Aug 14th in Wordpress by Harley

So I was reading a few blogs that I read, as you do on a lazy afternoon, and I came across Ideate . I loved the theme so much, I wanted to re-create the little TV box they have that contains a YouTube video. In this tutorial, we'll have a look at how!

Author: Harley

I'm Harley! I like to call myself a jQueryfied WordPress designer! What a mouthful, huh? I'm based in Australia and have been working with (X)HTML/CSS, Flash, Illustrator and Photoshop for over 3 years, and have found a now year and a half old obsession with WordPress and jQuery. Be sure to get some more info on me on my site!

Preface

We'll assume that you have a live WordPress installation, whether it be local or hosted. There are tutorials on running WordPress locally here for Windows, and here for OS X.

Step 1 - The Necessities

Alrighty. So apart from the obvious need of a WordPress installation, we're going to need a few extra things too. I got a whole bunch of files you're gonna need to have in your theme folder. Name a new folder in wp-content/themes 'youtubeFeature', and put all this stuff into it.

Edit style.css if you want, though it's default wont hurt. Go to your wp-admin and activate the theme!

We need a video post!

Now for the tutorials sake, we need to make a new post in wp-admin. So open up your wp-admin, click write new post. We only want the content to be the youtube vid, right? Go to your favorite YouTube video, and in the info section on the right (right next to the video player itself) you should see the embed bit.

Grab that bit of code, and paste it straight into your wp-admin write new post content area! Don't forget to make sure that you're editing in HTML mode not Visual:
. Very important! You need to change some parameters so that the video fits our screen. On both occasions, change the '425' in the width parameters to '250', and the '344' to '210'. Go down to the categories, and click '+ Add New Category', and aptly name it 'Video':
Click Publish, and we're away!

Step 2 - HTML

We'll need some base HTML and basic WP info, right? We'll do that now, then we can add the important WordPress code later on. This does contain some WordPress code, but not the bits that show the YouTube vid!

<!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 profile="http://gmpg.org/xfn/11">

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	
	<?php wp_head(); ?>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<h1><a href="<?php bloginfo('url'); ?>" title="home"><img src="<?php bloginfo('template_directory'); ?>/images/headerImg.png" alt="" /></a></h1>
		</div>
		
		<!-- tvSection goes here! -->
		
		<div id="container">
			<img src="<?php bloginfo('template_directory'); ?>/images/tag.png" alt="" id="tag" />
			<div id="content">
				
				<!-- Normal WP loop goes here -->
				
			</div>
		</div>
	</div>
</body>
</html>

Huh? Did you say that's a lot? Yeah... It's a bit I guess. But it's all basic stuff. Link the stylesheet in, show the h1 a img (which happens to say IBLOG in Arial), show a little tag, and close all the divs. Real easy stuff.

Step 3 - WordPress code

As I said before, we need 2 loops. One for the video section, the other for the main loop. Easy done with WP_Query! Our first loop query will tell the loop to only show the content of the most recent post under the category 'Video'. Replace the tv-Section comment with:

<?php 
	$youtube = new WP_Query();
	$youtube->query('category_name=video&showposts=1');
	while($youtube->have_posts()) : $youtube->the_post();
?>
	<div id="tvSection">
		<?php the_content(''); ?>
	</div>
<?php endwhile; ?>

You get the parameters in the query, right? Like I said, post from category name: Video, only show 1 post. Simple. If you don't understand WP_Query, have a look back at this tutorial for a more extensive look. Great! So if you'd added the post correctly, with only the YouTube content as the content, it should look something like this:

The second loop is a much simpler, basic loop. Just your Average Joe loop. It should replace the second comment in index.php!

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
	<div class="post">
		<h2><?php the_title(); ?></h2>
		<div class="entry">
			<?php the_content('read more...'); ?>
		</div>
	</div>
<?php endwhile; ?>
<?php endif; ?>

Now, without any CSS styling just yet, it should look something similar to this:

Step 4 - CSS

Here is where the magic happens!

To start off, we'll get some basic stuff out of the way.

*{
	margin: 0;
	padding: 0;
	border: 0;
}

body{
	font: 75%/18px Helvetica, Arial, Tahoma;
	background: #998835 url(images/bg.png) repeat-x;
	margin: 0;
	padding: 0;
}

#wrapper{
	width: 800px;
	margin: 0 auto;
}

h1{

	margin-top: 30px;
	padding-left: 90px;
}

This is just resetting the margins, setting standards for the body (giving it the background of 'bg.png' and #998835, a pukey yellow colour!). Centers the whole thing, and makes it a max of 800px.

Alright! now to style our TV!

#tvSection object{
	float: right;
	background: url(images/tv.png) no-repeat left top;
	width: 250px;
	height: 210px;
	padding: 39px 125px 70px 55px;
}

The reason we're editing the object within the TV section is because no matter where that object moves on the page, it's going to take it's padding and background with it. So to save problems, giving the object such attributes fixes the background behind the vid - no matter what content there is. It also assures us that if there is any other content accidentally put in, it's displayed against the blank white of the container so you can see it's there! (Or you could give the p a grey background as a caption, who knows?)

Firstly, get it out of the way to the right. A given. Secondly, we give it our TV image as the background! By making the width and height of the TV section the same as what the YouTube video was set as, it constrains it to that small square - so we know it will remain in the right place. The padding just displays the rest of the TV. In my WYSIWYG editor, it's possible to view the padding (with the dotted line!). So to give you and idea of what the very specific padding does I'll show you a screen shot. The solid line cutting through the top half is the negative margin!

The negative top margin just shoves the whole thing a little higher up the page, so that it's halfway between what is soon to be the white container div, and the top of the body (pukey yellow!) Our TV should now look something like this:

Next up is the content and container fixing. the container needs to be white, while the content div needs to be narrow with the small shadowed thing at the top. Easy done:

#container{
	margin-top: 20px;
	background: url(images/containerBg.png) repeat-x center top #fff;
}

#tag{
	padding: 70px 0 0 34px;
}

#content{
	clear: both;
	width: 425px;
	background: url(images/contentTop.png) no-repeat center top;
	padding: 40px;
}

And finally, the rest of the post content! We've been paying so much attention to our TV, that the regular loop feels insignificant! Let's give it some life with some red and grey and floaty images!

.post{
	margin-bottom: 30px;
}

.post h2{
	font: 36px Georgia, "Times New Roman", Times, serif;
	color: #b30d0d;
	margin-bottom: 0.5em;
}

.post p{
	color: #555;
}

.post p a{
	border: 0;
	color: #a80509;
}

.post p img{
	float: left;
	padding: 0 10px 0 0;
	border: 0;
}

a.more-link{
	display: block;
	padding-top: 5px;
}

And now it should look somewhat similar to this:

It look rather like our Photoshop mockup, and not unlike the Ideate website's header... Yes I know it's missing some patriotic flags!

Well done! You've put a Youtube Vid in the tube in a wordpress skin!


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

User Comments

( ADD YOURS )

  1. Greg August 14th

    Kind of neat, I’ll have to look into implementing something like this into one of my sites.

    - Greg


  2. w1sh August 14th

    Looks awesome. Nice TV.


  3. Nate August 14th

    I guess I could see how this could be used on a few sites.


  4. Taylor Satula August 14th

    Really cool idea. Out there but still good


  5. Chris August 14th

    Love the idea.

    lets stop using the <embed> tag!

    it’s deprecated.


  6. Mike August 14th

    Nice idea but there is no excuse for invalid code.


  7. Connor August 14th

    Thanks Chris ;)


  8. Tommy M August 14th

    Not bad, although I feel like it would have been easier to accomplish this in an easier way.

    You could have used one loop, then just checked if the first post was a video. If it is, then apply the TV/CSS properties.

    Good idea and functionality though!


  9. novice August 14th

    Original idea. Something like iPod with video in it can be used for mobile phones blogs :) Thanks.


  10. Shane August 14th

    Quite right, @Chris.

    A good starting point for video on a wordpress site. Thanks for posting.


  11. Harley Alexander August 14th

    A good point out the invalid code - I simply used the Youtube snippet out of simplicity for you all. Here, for those bothered to use it is the valid code. Turn this:

    into this:

    (From Connor’s Evening tip a few nights ago ;) )


  12. Braden Keith August 14th

    thx for not just showing it, but going further to show integration. Very nice tutorial, very good idea


  13. mattems August 14th

    this is cool but another option would be to have the TV as a png with the screen transparent. Then put the flash underneath :)

    you could even put a shine across the tv to get the curved looked.

    then you can fill those edges. As for the flash player controls. i wonder if it is possible for them to be called using javascript. Like a trigger. hmm

    good tut.

    cheers.


  14. insic August 14th

    i am looking this tutorial a long time. now its here in nettuts. thank you guys.


  15. Stelios August 15th

    Great idea:)

    Is there any way to add this to a sidebar ?

    Thanks


  16. Connor August 18th

    An added effect that you could add to this would be using the JQuery UI effect clip to turn on the TV (reveal the youtube video). It looks just like you’re turning on an old TV.


  17. Taylor Satula August 21st

    @connor Huh. I never thought of that thats a great idea
    write out the code for it i wanna see how you would do it


  18. sesebian September 16th

    Thanks


  19. bill October 25th

    very cool


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name November 21st

Arrow