The other day I was struggling with the ugliness of an embedded YouTube video on a website. HIDEOUS! I thought up a very simple solution to this problem, all you need are two images and a dash of jQuery. I’m not claiming to be the first to think of this solution, by any means, but I hope somebody out there finds it helpful.

So, YouTube takes three screenshots from your uploaded video around the quarter, half, and three-quarter marks then you get to choose which of those three shots is displayed behind the play button on your embedded video. Whether it is the static image you want or not, its going to look bad. But YouTube is SO convenient, and easy, and FAST! You don’t want to quit using it, right? Of course not. This tutorial is for you.

We’re about to turn this:

into this:

Okay, let’s get right down to it. HTML first, then CSS and jQuery.

HTML:

All we do is set up an empty div with an id so we can easily target it.

<div id="example-video"></div>

CSS:

Give your div the exact height and width of your video, make the cursor a pointer, and set the background with an image of the same height and width. If you’d like your video to have a hover state like mine, just switch the background image on hover.

div#example-video {
    width:694px;
    height:390px;
    cursor: pointer;
    background: url(example-vid-inactive.jpg);
}
div#example-video:hover {
    background: url(example-vid-active.jpg);
}

jQuery:

Now we’re getting to the good stuff.

1. Be sure you link to jQuery, whether it be your own copy or from a CDN like Google (which is what I did below).

2.Wrap your script in the $(document).ready anonymous function so that the entire page loads before your script runs.

3. If you chose to have a hover state for your video, preload the active image so there isn’t any lag time to when your video is hovered over.

4. Target your empty div then add a click action to it.

5. Use .replaceWith() to remove your div from the DOM and replace it with your video! Be sure your video is set to start automatically or your visitor will have to press TWO play buttons and that’s just awkward.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"
type="text/javascript" charset="utf-8"></script>

$(document).ready(function(){

    var image = $('<img />').attr('src', 'example-vid-active.jpg');

    $('div#example-video').click(function(){
        $(this).replaceWith("<embed style='border:1px solid black;'
        width='694' height='390' src='http://www.youtube.com/
        v/5udKHkwb8rc?version=3&hl=en_US&HD=1;rel=0;showinfo=0;
        controls=0;autoplay=1' type='application/x-shockwave-flash'
        allowscriptaccess='always'allowfullscreen='true' />");
    });

});

You’re thinking: “I don’t know what that URL stuff means.” Well, you can actually control A LOT about your embedded YouTube video by manipulating its URL. Take the example below, which is the URL used in my video example above:

http://www.youtube.com/v/5udKHkwb8rc?version=3&hl=en_US&HD=1;rel=0;showinfo=0;controls=0;autoplay=1

The grey part of the URL is what comes straight out of the box with your embed. How do we come by this?

1. Navigate to your video’s YouTube page. Click the “Share” button underneath the video.

2. Click the “Embed” button.

3. Check “Use old embed code” then copy and paste the code. Voila!

The next part of the URL and the first thing you will need to add is an ampersand (&). Now you can start adding code to revamp your YouTube video.

Adding HD=1; to the end of your URL will play the HD version of your video if it is available. If there isn’t an HD version, no harm no foul. I like to add it to the end of all videos just in case.

Adding rel=0; will keep that annoying screen of related videos from popping up once your video has finished playing. Don’t mind the related videos? Just leave this off the URL or set it to rel=1; instead.

Adding showinfo=0; will keep information such as the title and description of the video OFF of the video. Want to leave that info? Then leave this off your URL.

Adding controls=0; will keep the video controls from appearing on the video. It has its pros and cons. You wouldn’t want this for a long video, as the user wouldn’t be able to rewind or fast forward. The only controls available when adding controls=0; to your URL will be play and pause, by clicking directly on the video.

Last but not least (especially for this tutorial), adding autoplay=1; to your URL will auto-start your video. Auto-start means the user won’t need to click any play button for the video to start. In our case, we created a fake play button for the user to click.

There are a lot more things you can add to your URL to control the way your YouTube video is presented. Check out the full lot of them HERE. Did you notice that there was a semi-colon (;) after each of the snippets we added to the URL? That’s how YouTube knows to separate them from each other. Anyway, drop that very last semi-colon from the URL, you won’t be needing it.

And that’s all folks! Happy Internetting!

If there is one thing my boyfriend DJ knows how to do and to do well, it is throwing a meal together! Last Friday we were both tired and didn’t want to go out to eat or bring in takeout because we’d already had takeout twice that week. So he whipped up a meal from things around the house and it turned out FANTASTIC! We had cheeseburgers on toast, jalapeno black eyed peas from a can, and fried green beans.

Then last night, Sunday, he got a hankering to make something and ended up roasting a whole chicken! It turned out incredibly scrumptious and juicy. I’ll be eating chicken sandwiches every day this week. Look at the butter on that chicken’s back! That’s the goooood stuff right there.

Also yesterday, we bought a Christmas tree for our apartment! A little premature, you might be thinking. So, I won’t show the tree yet, just this adorable image of Bruce underneath it.

This year before Halloween, DJ and I went over to my best friend Renee’s house and carved pumpkins with her and her family! Mine is the polka-dot one :]

I’ve been a huge fan of Grooveshark ever since my brother Phil first showed it to me around Christmas of 2008. But its reign is coming to an end. Spotify has hit the shores of America! I first heard about it on Kidd Kradick in the morning, a guilty pleasure that stretches back to 6th grade. I’m only human, so naturally I have major love for Kellie Rasberry. I thought spotify sounded neat, but not much different from Grooveshark. And truth be told, its not. But the little bit that is different, is awesome.

First of all, it has a desktop client. Actually, in order to use it you have to download the desktop client. Now, Grooveshark did have (does have?) a desktop client, and I used it for awhile, but it was not reliable. And Spotify’s desktop client is straight up slick. Yeah, I started using that word recently. People seem to like using it in regards to web designs and applications, and since I’m a ‘web developtress’ (as I like to say), I’d better get caught up on all the lingo. JUST LOOK AT IT!

Anyway, let’s just get this over with and run through a few pros and cons of each:

The best thing about Grooveshark is easily the widgets. I’ve posted playlists with the help of both Grooveshark and 8Tracks, but believe you me, Grooveshark’s are better. But even the widgets aren’t very reliable. You may create one, post it on your blog, then 3 days later you go back to see that only one song is left on the list. This has happened to me with a Cyndi Lauper playlist repeatedly. Makes me wonder if it is only a circumstance of certain songs or artists? Because I’ve got a couple Grooveshark playlist widgets over a year old that are still holding tight. Grooveshark also has an immense collection of music available, and I mean immense. Within just a few days of using Spotify I was disappointed to discover a handful of precious songs that had racked up dozens and dozens of listens on my Grooveshark account weren’t even available on Spotify, but they are adding more every day so here’s hoping!

So Spotify may be missing a few tracks here and there which I’d love to be added, but it is greatly superior in MANY other ways. First of all, the social aspect of Spotify is fantastic. Download the desktop client, link the account with your facebook account and suddenly you have a list of your “people” at the ready. Go fumble through their playlists; IT IS GREAT FUN! If you have your Spotify account linked up with your facebook account, then any of your facebook friends who have done the same will automatically be added to your “people” list. SO CONVENIENT! You can “subscribe” to other people’s playlists. When you subscribe, that playlist shows up in YOUR sidebar and you can keep up with what updates are made to it.

One of the crucial differences between Grooveshark and Spotify and what makes Spotify officially superior to Grooveshark, is that you can integrate your itunes library into your spotify desktop client… to create playlists from ALL of your music. This is one of the things that I always thought would have made Grooveshark better, but never in a million years did I think I’d someday be able to do it. This is what convinced my boyfriend DJ to get Spotify. Its an incredible feature!

PLAYLISTS! Playlists are the steroid juice of Spotify. Let me demonstrate the glorious way in which your Spotify desktop client and the world wide web work together to bring you juicy playlists. For instance, let’s say I want to send you loyal readers a playlist I’ve made. In fact, I do. I’ve worked very hard on my 70′s Music playlist and I want other people to enjoy it as much as I do.

First, I simply post a link to my playlist. I’m not trying to give you Spotify 101 here, so you can figure out for yourself how to generate links for your playlists.

I’m guessing most of you don’t have Spotify yet. Now would be a good time to get it so that you can listen to my 70′s playlist. So for those of you that don’t have it, I’m going to lay this out for you with screencaps.

Click the link and you’ll end up at this page:

You’ll either be prompted immediately with the pop-up below or you’ll have to click the giant play button on the screen above.

Open it up with Spotify and there you have it! My 12 hour long playlist is ready to juice up your ears. And check it out, my playlist has two subscribers! I feel so popular.

Alright. Now that you know how easy it is to add playlists from the web to your Spotify account, how do you find and/or generate those playlists? Lucky for you I’ve found a few wonderful ways:

Are you the top 40 type? I’ll admit that listening to some pop music in the morning on my way to work can help get me pumped. Cause you gotta get pumped to sit at a desk on your computer all day. You gotta!

A play list generator. If you have a last.fm account, you can generate a playlist based on your last.fm stats. Sweet right? You can also type in any artist or band and get a playlist back. Just place your browser next to Spotify and drag the playlist over. OUILA! Click on the “more options” button to choose the length of your playlist. I always go for the maximum (50).

Another playlist generator. Again, type in any artist and you’ll get back a playlist! And again, you get to just drag it over into Spotify. Simple as pie. 50 not enough tracks for you? Just keep clicking “more artists” and watch your playlist grow.

Search through playlists created by users. Join and add your own! Choose one, click play, listen and/or subscribe. They also have their own playlist generator that is so kind as to ask whether you’d prefer popular or obscure tracks. For hipsters, by hipsters?

Well, hopefully I’ve convinced you to check out Spotify! And send me your username :] I’m rach_inabox. Happy internet-ing, friends!

Well, I got a job. Yep. I’ve been working since July 5th! I’m done with my schooling. It’s the end of an era! But I ain’t even close to done learning. I’m on to the schooling of LIFE. This is my excuse for not blogging in awhile. That, and before I started working I was spending all my days unpacking. The apartment is basically in order so I’ll post photos of it soon, maybe next weekend :]

I’ve been busy and tired. Yes, I’m getting 8 hours of sleep a night, but I’m used to getting 9 or 9 and a half! Haha, what a douche thing to complain about. OOPS. I’m very happy though, and EXCITED. Already getting used to my new routine. Oh, how I love a good routine! Bruce has been so happy to get up with me in the mornings, because he hates the heat and the temp is below 90 before 7AM. I’m having to buy an entirely new wardrobe (“business casual”)! I’ve worn hoodies and t-shirts for the past 5 years. Am I finally a grown-up?

Anyway, this past Thursday I had a fantastic night. I was so excited by my situation that I had to take some pictures! From 8-9PM, DJ played xbox while I took a bath and watched last week’s episode of Pretty Little Liars. Not only that, though. I had a bottle of Moet on the edge of the tub in a homemade ice bucket that DJ had prepared for me. He added salt to the ice. Whatta way to relax, my friend! I recommend it. And I held good company with Bruce, rotating from rug to rug.

So here’s the set up: a step ladder to elevate my laptop, external speakers are plugged in through USB, dog wondering what the hell is going on.

Ice bucket, check. Champagne, check, Champagne stopper, check. Lush bath bomb, check. Pretty Little Liars queued up on itunes, check. Gay cowboy rubber duckies, double check.

Do I really even need to tell you that this was a fantastic night? I should make it a weekly thing…

So I’ve held onto this particular pair of shoes for way too long. They were my uniform shoes in middle school then high school for the longest time. As long as I could get away with, pretty much. We had to wear black or brown shoes. Toes and heels covered.

They used to be clean, black, mary-jane types. Over time, one of the straps around the ankles broke so I just cut the ankle parts off of both shoes. Then they were kind of like a clog or mule. Somehow, I got away with this. Teachers weren’t noticing that I was basically walking around in platform slippers. So I started to decorate them.

I took some sparkly green nail polish and painted a ring around the platform. The thin black fabric from the sole started to bunch up so I pulled it off, exposing a sticky white surface underneath. The stickiness wore off before long and I decorated the new white soles with my permanent marker collection. Out came the sparkly pink nail polish and there were hearts painted on the heels. Finally, hot-glue-gun in hand, I bordered the edge of the clog with plastic gemstones.

And those adorable little gemstones are what brought the demise of my beloved school shoes. No, they weren’t noticed right away. After all, I wasn’t one of the kids that brought attention to themselves. I stayed under the radar, right along with my shoes. But noticed, they were, and I was forbid to wear them again.

It may sound a little melodramatic but let me just express, in the plainest way possible: Those shoes were really f#&%*$@ comfortable. It was a sad day but the shoes lived on, stashed in my closet, until today. They are a stinky pair of old shoes, no good anymore; Its time to throw them out. But I’m a very sentimental person, you see? I’m tired of them lying around, taking up space but I couldn’t bare to just toss them to the curb without a second glance or thought. So I’ve taken these photos for the off chance I’ll want to reminisce…

Goodbye old shoe friends! You treated me so well!

Hey everyone! So last week, my boyfriend DJ and I took our 32 hour road trip from Waltham, MA to Coudersport, PA to Louisville, KY to Little Rock, AR to Irving, TX and our NEW HOME! We’ve been here since last Wednesday, waiting for our furniture and boxes to arrive. They will finally be delivered tomorrow and we are so excited to get the new place set up and settled in. Once all the furniture is in place and everything is put away, I’ll post photos of the apartment again. Here are some fisheye snaps of the new apartment, empty. Some are kind of blurry OOPS.

So, when you walk in through the front door, the living room is in front of you and the master bedroom is directly to your right.

This is the master bedroom. It seems juuuuuust big enough to fit a king-sized bed.

Both of these photos are of the master bathroom which is IMMENSE. The bathtub is huge and there is a stand-alone shower and two sinks! There is a walk-in closet accessible from this bathroom.

Here is the living room from another angle. The fireplace is a nice, extra touch. I am excited to load up on Duraflame logs to use this winter.

The living room from a third angle. The kitchen is straight ahead and to the left is the 2nd bathroom and 2nd bedroom.

Our kitchen! It is at least twice the size of the old one.

The 2nd bathroom.

The 2nd bedroom.

Bruce has been getting spoiled over the last few months, and so have I now that I think about it. Most of the time now-a-days, I take Bruce out back without a leash because he is very good about never leaving my sight, staying away from where I tell him to stay away, and coming back inside when I call. So I’ve been able to stand on the back porch to watch him, or even just lounge in one of our lawn chairs while he does his business. When he is done with his business he usually likes to plop down facing the wind and catch the smells as they go by.

Hey everyone. Thought I should invite you all to a night with us here in Waltham, before we move away for good in a couple weeks! We’re having steak topped by sauteed mushrooms and diced up yellow squash, prepared by DJ of course. And then we are doing legos in bed :] just kidding, just kidding, these pictures were taken a few weeks ago. Add an unhealthy amount of television watching and you’ll know what a typical night at our apartment here in Waltham has been like! We are starting the drive down to Texas in 11 days. May the countdown begin!