Make YouTube Videos Look Great
YouTube does a lot of things well, and most of the time it’s a handy way to get a video on your website. One area where they fall short, is the way embedded videos look. As designers, we spend a ton of time making sure a web site looks great, then BAM! embed a video and it all goes to hell. Colors, controls, fixed widths, and settings (like showing related videos of your competition at the end of a video) all conspire to ruin a beautiful thing.
The standard YouTube embed looks like this:
Fortunately, there are ways to modify the way embedded videos look and function. The only thing we can’t do with YouTube parameters is make the video embed responsive, but that can be handled with some clever CSS (Here’s a post by Rachel McCollin that will explain how to make iframes responsive).
Another key detail to make YouTube videos look great
It would be lame to go through all the trouble to make your embedded YouTube player look good, then roll with the standard cover image that YouTube selects. Make your own custom cover photo. Not only will it look better, but it’s also an opportunity to include additional information like titles, a call to action, and your own branding.
Skip the details
If you don’t care why it works and just want the code to make it look good, add this text string to the end of the src url:
With the modified YouTube video parameters
This will hide everything and give you the cleanest looking embed by hiding the controls, eliminating the video title from the header, and removing the related videos from the end.
For those of you that like to know why
There are lots of parameters YouTube provides that allow us to modify the way videos function and are displayed, but there are 5 in particular that will handle most of what you’ll use. A complete list can be found here: https://developers.google.com/youtube/player_parameters
One last thing
One last note before diving in to the parameters; there are two important connectors that need to be included for this to work. First, you must add a
? after the last character of your url before adding the parameters. Second, separate each of the parameters with a
;. For example, the standard url for our Hosting Deficiency Syndrome Video is:
to that we added the string:
giving us a combined string that looks like this:
The Big 4
Now for the parameters, with a brief explanation of how each one works.
Modest Branding – This parameter controls the display of the YouTube logo. The options are 0 or 1, we almost always set it to 1.
Controls – This parameter indicates whether the video player controls will display. Our options are 0, 1, or 2. Default is 1. We almost always change it to 0. If you have a video where you want the viewer to have more control leave this at 1.
Show Info – This parameter controls the display of information like video title and uploader. Value options are 0 or 1, set the value to 1 to remove the information from the video.
Related – This parameter indicates whether the player should show related videos at the end of your video. If you have a lot of related content, sometimes this is a good idea. More often than not it will display videos from other YouTube users, you’ll have to decide what is best for your situation.
Whether you just want the code or the particulars, fixing how your YouTube videos are displayed goes a long way to keeping your website looking great. Hopefully this info will help make your YouTube video embeds more attractive and suck less.
Images are essential to an effective website. Quality photos can mean the difference between a successful website and an ugly website that burns the retinas of it’s viewers.
Photos are especially important for websites that need to communicate anything visual; such as products, artwork, or services.
Here are a couple of websites that do a great job communicating visually with images:
Not only is it important to be posting big beautiful photos, it is equally important that they are properly optimized for the web. Not having properly optimized photos means you are probably missing out on potential visitors and sales.
Do your images provide Google and other search engines with the relevant information they need to be properly indexed? If not, how are people going to find them?
Are your photos too big? If so, they could be taking longer than necessary to load on phones and other mobile devices.
Why optimize your images?
Google can’t read photos… at least not very well. This is why you need to tell Google what the image is so that Google can correctly index and organize it.
Is that another photo of your cat with sunglasses? Or is that a photo of your Grandma’s famous green jello recipe? Google doesn’t know. You need to tell it.
Here are 5 important steps to optimize images for the web:
1. Image sizes
Before your photo is posted to the world wide web, it’s important that it be the right file size. If your images are too large, your visitors are not going to wait around for your website to load; especially mobile visitors. Images that are small in file size are essential for fast page load times. Unless you have access to expensive image editing software such as Adobe Photoshop, there are plenty of free online tools to help optimize image size; here is a great one.
2. Image Title Tag
Give your image a good title tag. The title tag is what the visitor is going to see when they highlight over the image with the cursor. Wordpress makes uploading and tagging images a piece of cake. Simply type in the title tag after uploading your image:
If you’re not using wordpress, and are updating your website like a dinosaur, the format goes like this:
<img src=”cat.jpg” title=”My Cute Cat”>
3. Image Caption
Add a caption tag to give your visitors a nice description or insight about your image. In WordPress, the caption is added directly underneath your image. Image captions are not used by Google, so only add if you want to give your visitors additional information.
4. Image Alt Tag
The Alt tag is especially important for SEO and Google indexing. Make a habit of always putting relevant keywords that describe your image in your alt tags. The alt tag will also be displayed in place of the image if the image link breaks and cannot be displayed. WordPress also has a handy field to add an alt tag:
<img src=”cat.jpg” title=”My Cute Cat” alt=”cute brown cat”>
5. Image File Name
When uploading any image, make sure it has a descriptive file name. A year from now when you or a visitor are searching for a particular image, which one do you think will be easier to find?
IMG_8692.jpg or cute-brown-cat.jpg?
These are 5 great ways to help optimize your website and get more traffic. Interested in more information on maintaining an effective website, sign up for our newsletter in the right sidebar.
Have any more image optimization tips? Please leave them in the comments below!
Is your website costing you sales?
5 slides, 3 questions, 1 answer.
Now a presentation on SlideShare:
A website can truly be an interactive portal into your business. However, there are millions of websites out there, so how do people find yours?
The answer is, they may not need to. One way to put a face to a name is by using facebook. Facebook is the modern day version of “Word of Mouth”. By engaging in social media, businesses suddenly become more trustworthy, approachable and friendly. This personal interaction enables you to provide information that is both relevant and up to date to an audience that has already asked for it!
If people have liked your page, it is a place to present your goods and services to an audience who already trusts you and it’s free. Also, with more and more analytics available to businesses, it’s a user friendly and almost immediate source to see what is working with the public and what isn’t.
When you are using facebook effectively, you may be able to eliminate the need to drive traffic to your website and maybe even tap into a market that you may not have been able to crack before. All this without them having to move a virtual muscle!
While there is no one tool that works for every business, facebook is a way for people you know and who know you (or know someone who knows you) to find your needle in the proverbial haystack.
Blogging From Your Phone
Not all blog posts have to be authored from your computer. The WordPress app for Android and iOS provides similar features to the desktop version and allows you to post from virtually anywhere. With the ubiquitous use of smart phones there is nothing getting in the way of blogging for your business. You never know when a post will be just what your next customer needed to hear.
Get the Android app here: WordPress on Android
Get the iPhone/ iPad app here: WordPress on iOS