Learn how to turn the standard YouTube video player into an audio player and embed it in your website using simple CSS.

How do you embed only the audio portion of a YouTube video in your web pages.

A popular option would be that you extract the audio portion of that YouTube video and then use the Google MP3 player to embed that MP3 fil into your website. This will work but YouTube is very likely to have a problem with your approach.

The other approach could be CSS based where you embed the regular YouTube video player and then use the magic of CSS styles to hide the video inside the embedded player. See demo:

This internally renders the YouTube player using the IFRAME player and should therefore work on both desktop (Flash) and mobile (HTML5) browsers.

Without boring you with the technical details, here’s the little HTML code that turn the YouTube video player into an audio player. Simply replace the youtubeID with the ID of your YouTube video and you are done.

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
  <div style="position:absolute;top:-276px;left:-5px">
    <iframe width="300" height="300" 
      src="https://www.youtube.com/embed/youtubeID?rel=0">
    </iframe>
  </div>
</div>

The YouTube logo inside then player, when clicked, will transport you to the original video hosted on the YouTube website.

Read More

Would you like to watch movies and popular TV shows on Hulu from outside the US? Now you can with a simple add-on that requires no configuration.

Hulu.com is one of the best places on the web where you can watch movies and popular TV shows for free. All you need is a web browser with the Flash Player and you are good to go.

Hulu at this is time is only available in US but there’s an a new browser add-on called MediaHint that makes it dead-simple for anyone to access Hulu from anywhere in the world. Just install the extension and there’s absolutely no configuration required.

MediaHint is available for Firefox and Google Chrome (how to install). I was looking at the source code of the Chrome add-on and turns out that it merely changes the proxy server settings of your browser when you try accessing a Hulu video. Here’s the relevant snippet:

function FindProxyForURL(url, host) {
    var usa = ['hulu.com', 'netflix.com', 'pandora.com'];

    var direct = ['assets.hulu.com', 'll.a.hulu.com', 'ads.hulu.com', 'stats.pandora.com', 'blog.netflix.com', 'nordicsblog.netflix.com', 'blog.pandora.com'];
    for (var i = 0; i < direct.length; i++) {
        if (host.indexOf(direct[i]) > -1) {
            return 'DIRECT';
        }
    }

    if (host.match(/audio.*\.pandora\.com/) || host.match(/const.*\.pandora\.com/) || host.match(/mediaserver.*\.pandora\.com/) || host.match(/cont.*\.pandora\.com/)) {
        return 'DIRECT';
    }

    for (var i = 0; i < usa.length; i++) {
        if (host.indexOf(usa[i]) > -1) {
            return 'PROXY 50.116.59.63:80';
        }
    }
    return 'DIRECT';
}

In addition to Hulu, the same add-on may also be used for accessing music site Pandora and movie-streaming site Netflix from outside the US.

Read More

You can pass more Google PageRank to your blog posts if you decrease the number of links on your blog’s homepage and archive pages.

Most blogs use the following layout for their home pages and the archives. There’s the title of the post, a short excerpt (description) and a “read more” link that points to the full article. Some blogs may also add a featured image near the post’s excerpt.

A common layout for blogs

There’s one little problem with the above layout though – it wastes your Google PageRank and thus may not be the most optimal layout as far as SEO is concerned.

Let me try explaining it in simple English.

Your blog’s homepage has a finite amount of Google PageRank that is equally distributed among all the links that exist on that page. Thus, if you put 10 links on a web page whose PageRank is 5, each of those links is passed 0.5 PageRank. If you decrease the number of links from 10 to 5, each of the links will be awarded with a PageRank of 1.

In the above example, there exist 2-3 links per post on the homepage – the post title (1), the featured image (2) and the “read more” link (3). If you can have just create one link from the home page to the inner post page, the linked page will get more PageRank which may benefit them in organic search rankings.

How? A possible solution is that you get rid of the “read more” link on the blog homepage (and archive pages) and instead apply a different CSS style to the post titles so that they instantly appear as links – you can use a different font family, increase the font size and maybe apply a different color (like some shade of dark blue).

Read More

You can run the iOS Simulator app in any Windows browser and test your web designs without even having an iOS device.

The iOS Simulator is primarily targeted at Apple developers for them to develop iPad and iPhone apps on a Mac. That said, if you create websites, you can also use the iOS Simulator app to test your web designs on an iPhone or iPad without actually having the device. The iOS Simulator includes the native Safari app that is very close to the real thing.

The iOS Simulator app is only available for the Mac but if you are Windows or Linux, you can use the Browser Stack tool to run the “official” iOS Simulator directly in your web browser without installing any software.

To get started, create an account at Browser Stack and then choose “iOS” as the platform. Put your website URL in the input box and choose an iOS device – they offer the iPhone 3GS/4/4S/5 and iPad 1/2/3 loaded with various version of iOS. You can also switch devices while you are inside the iOS Simulator (see the above screenshot).

This is like you are connecting to a remote Mac using your browser and that computer is running the iOS Simulator app. While you are inside the Simulator, tap (i.e., double click with your mouse) the Safari icon and launch any of your websites.

Unlike the fake emulators, what you are now using i very similar to the actual Safari app that available on a physical iOS device except that you have to use the mouse and not touch gestures to interact with the app.

The free plan offers 30 minutes of testing. And in addition to the iOS Simulator, Browser Stack also includes emulators for various Android devices.

Read More

If you do not wish to show your exact location in Tweets, you can either turn off geo-tagging or attach a random location.

On Twitter, if you do not wish to reveal your geographic location in your tweets, you can either completely disable the location feature from Twitter settings or you can can attach some random (read, fake) location to your tweet.

For instance, here’s a recent tweet that specific my location as the White House in Washington DC though it was written from a place that is at least 8000 miles away.

Fake your geographic location on Twitter

Attach any Location to your Tweets

Now most Twitter mobile clients won’t let you attach random locations to your tweets but there’s a web-based app called PleaseDontStalkMe.com that may come handy here. Here you can pick any location on a Google Map – either drag the marker or use the search box to reach an exact address – and tweet.

Since the Twitter website no longer displays the app name that was used to send that tweet, your followers on Twitter are less likely to know that you faked your location in the tweet. Do remember to limit the length of your tweet to 140 characters else the tweet would fail but without offering an explanation.

You can geotag your tweets from the Twitter.com website as well (click the Location icon near the tweet button) but in that case, you can only attach a city-level location to the tweet and not an exact location.

Read More

You can watch any YouTube video or entire video playlists outside the browser using the VLC Media Player. And the videos will play without the ads.

Do you know that VLC Media Player, the world’s favorite video player that supports nearly every video format, can also play YouTube videos on your desktop without requiring the web browser or the Adobe Flash player.

To get started, open the VLC player, press Ctrl+N to open the Network URL dialog and paste any YouTube video URL in the input box.

The Benefits of Watching YouTube Videos with VLC

The streaming videos will play inside VLC Media Player just like any other local video file while offering some additional benefits not available inside the standard YouTube player. For instance:

1. You can choose Video -> Always on Top inside VLC and the YouTube video window will stick to the foreground while you work on other tasks.
2. Press the Loop button in the player controls and the YouTube video will play non-stop in a loop (also possible with Chrome add-ons).
3. You can change the Playback speed of the YouTube video and make it run slower or faster than the normal speed.
4. Use the Tools -> Take Snapshot option to capture a screenshot image of any frame or scene in the YouTube video.
5. Watch the YouTube videos without the ads. I played a couple of movies and music videos inside VLC and none of them carried any pre-roll ads.

Play YouTube Playlists inside VLC

VLC, by default, only supports single YouTube URLs but it also possible to import an entire YouTube Playlist into VLC and watch all the videos in sequence.

You can watch an entire playlist of YouTube videos inside VLC Media Player.

Here’s the trick. Right-click and save this file to your desktop. Now open the VLC installation folder (%ProgramFiles%\VideoLAN\VLC) and move the .lua file into the exiting /lua/playlist folder.

Restart the VLC Media Player and choose Media -> Open Network Stream. Now paste the URL of any public YouTube Playlist here and the enjoy the videos.

Also see: Watch YouTube Playlists on your iPad

In addition to YouTube, VLC Player can also play DailyMotion videos outside the browser. It is supposed to work with Vimeo videos as well but that is currently broken possibly due to a change in the URL structure at Vimeo’s end. Thanks

Read More

The browser window size is a more important metric than screen resolution and you can use Google Analytics to track that number.

Google Analytics reports the “screen resolution” of the visitor’s computer but skips the other important metric which is the size of the browser window. These two numbers will be approximately similar if the browser window is kept in maximized state but not otherwise.

Take a look at the example below. The screen resolution of the desktop is 1920×1080 (this is the number recorded by Google Analytics) but the actual browser window size (where your website is displayed) is a little over 900×600 pixels.

Google Analytics displays the Screen Resolution and not the actual Browser Size of the visitor.

The screen resolution is a less-useful metric and what you really need to know is the actual size (or range) of the browser window of your visitors. This data can be easily gathered through Google Analytics – simply copy-paste the following code snippet just before the closing </body> tag of your website template:

<script type="text/javascript">
 var width  = window.innerWidth  || document.body.clientWidth;
 var height = window.innerHeight || document.body.clientHeight;

 width  = Math.round(width/100)*100;
 height = Math.round(height/100)*100;

 var size = width + "x" + height;
 _gaq.push(['_trackEvent', 'Browser Size', 'Range', size]);
</script>

It calculates the actual height and width of the browser window and then rounds off these numbers to the nearest 100. For instance, a browser size of 985×1190 pixels is recorded as 1000×1200 pixels. You can then access this data in Google Analytics through Content -> Events -> Overview and then choose “Browse Size” as the Events Category.

Once you know the popular “ranges,” you can update the site layout and placement accordingly so that visitors can see all the important elements on your pages Above the Fold without having to use the scroll bar.

Also see: Getting Started with Responsive Web Design

Read More

You can use Google Images to find pictures of a particular size (or resolution) using the undocumented imagesize search operator.

Google Images previously offered a useful “search by size” option to help you find images by their exact size (or resolution).

For instance, you could limit your search for landscape photographs to image files that were at least 10 Megapixels in size. Or, if you are were using Google Image search to find wallpapers for the desktop, you could specify the image resolution as 1920×1080 pixels and Google would only return large images with those exact dimensions.

The “exact size” search option is missing in the new Google Images but you can still limit your searches to a particular size by using the “imagesize” search operator in the query itself (see the above screenshot).

Enter the search terms as before and then add IMAGESIZE:WIDTHxHEIGHT to the query. Once you hit Enter, Google Images will remove the operator from the query but the results will only display images that match the specified size.

The search by size operators works on the mobile version of Google as well.

Read More

A sitemap file indirectly reveals the total number of Windows 8 Apps that are currently available in the Windows Apps Store.

Do you know how many Windows 8 Apps are available in the Windows Store?

The Microsoft website says that there are “tons of apps” for Windows 8 and Windows RT in the Windows Store but they haven’t revealed the exact numbers yet.

It turns out that there are 17,041 Windows 8 Apps in the Window Store (as on December 7, en-US) and if you want to dig a little deeper, download this text file as it includes a link to every Windows 8 app that’s currently available in the store .

How did I arrive at this number? Well there’s a sitemap file on apps.microsoft.com website, the domain that also hosts the Windows Store, which solves the mystery.

These always-updated XML sitemap files exist to help web search engines index the online Apps Store  and therefore should have entries corresponding to every app available in the Windows Store. The entries are  further split in 37 files (see a sample) and if you combine them all, it isn’t hard to calculate the actual number of Windows 8 Apps.

See more coverage of Windows 8.

Read More

Remotely Send Web Pages to your Mobile Device

Send live URLs to your mobile device and control them remotely without the need for the user to reload anything.

Framote is new tool that helps you share “live” URLs that can be controlled remotely.

To get started, you can specify any website – say cnn.com – and Framote will create a unique URL for that site. You can share that URL with a group of people and everyone will see the same website on their screens. If you update the underlying website at your end, all the other screens are refreshed automatically.

The service is especially useful for testing responsive designs. You can have the main website on your desktop computer and load the corresponding Framote URLs on your tablets and mobile phones. If you open a different page on your desktop, the mobile screens are updated automatically.

Internally, Framote embeds the source website into an IFRAME and makes an AJAX request to check the actual URL every few seconds. If the source URL has been modified, the IFRAME’s source attribute on the client’s screen is updated almost instantly. The Framote dashboard will also show list of IP address and devices that are accessing your unique URL.

Read More