Add a Driving Directions Form to a Website

This code adds a small field to enter an address, plus a “Get Directions” button. The results are shown as Google Maps directions.

Be sure to edit your destination address in the code.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="101 Main St, Tampa, FL 33615" />
   <input type="submit" value="Get directions" />
</form>

CSS to Force a Scrollbar to Appear in IE8 and FF

Websites sometimes appear “shift” side-to-side a bit when you go from one page to another within the same website. This is usually caused by going from a page with a scrollbar to a page without a scrollbar, and vice-versa. The scrollbar appearing and disappearing causes the page width to be slightly different, thus the shifting appearance. This is usually seen in FireFox and IE8 browsers, due to how they render pages.

So as a web developer, how do you fix this? Simple. Add this single line to your css:

html { overflow-y :scroll }

This forces a non-active scrollbar to appear on pages that would otherwise not need a scrollbar.

How to Embed and Display YouTube Videos on a Secure SSL Page

EDIT: 5/11/2018: The problem of embedding youtube videos in an SSL page is no longer a problem like it was in 2010 when I originally wrote this post. Youtube is now ssl enabled. And with Flash Player embedding an ancient memory, it is best to just embed using the YouTube iframe method.

I’ve found that this variation of code works the best to size and display the embedded iframe video:


<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/QILiHiTD3uc?autoplay=1&showinfo=0&modestbranding=0' frameborder='0' allowfullscreen>
</iframe>
</div>

 

EDIT 08/03/2010: A reader just pointed out that the method outlined in this post will present a warning in in the status bar when using the latest version of FireFox. No popups or dialog messages though – that’s good. And it still works flawlessly in IE and Chrome. Thanks to Jayapal for pointing the warning in FF.

Original Post:
Here is a cool trick to get rid of ssl security warning errors when embedding youtube videos into secure web pages.

This solution will work if your server is using Apache and has Mod_Rewrite enabled (most Linux web hosting companies do).

First, add this to your .htaccess file: Continue reading How to Embed and Display YouTube Videos on a Secure SSL Page