Lions Den

The Code and Times of Hanan Schwartzberg

About Hanan | Hanan's CV | Contact Hanan

December 15, 2015

Responsively embed a YouTube video

Filed under: CSS — Tags: , , , , , — Hanan Schwartzberg @ 9:35 am

The Issue

The default YouTube embedding code sets the video to a fixed size.

The Solution

Add these classes to your css:

.divVideoContainer {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    .divVideoContainer iframe, .divVideoContainer object, .divVideoContainer embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

Now wrap your embedding code in a div with the class defined above.

<div class="divVideoContainer">
    <iframe width="640" height="360" src=""
        frameborder="0" allowfullscreen></iframe>

October 26, 2009

Why the scrollbar won’t show on the left in Firefox

Filed under: CSS — Tags: , , , , — Hanan Schwartzberg @ 7:56 pm

The Scenario

When designing a website for a right to left (RTL) language the scrollbar should automatically be on the left hand side. The logic is that it should be at the end of the line, just as it is on the right for a left to right (LTR) language. This works fine in IE, but Firefox will always show the scrollbar on the right.

The Cause

Unfortunately this is by design. Firefox believes that the scrollbar is part of the browser, not the webpage and so by default a website should not have the ability to override the user’s settings. IE believes the scrollbar is not part of the browser but part of the page. Therefore, if a page is RTL the scrollbar should be on the left.

The Solution

This can be fixed on an individual instance of Firefox.

  1. Open Firefox
  2. Navigate to about:config
  3. Set the filter to layout.scrollbar.side
  4. Double click the layout.scrollbar.side line
  5. Change the setting to 1 and click OK

Now Firefox will behave like IE and show the scrollbar on which ever side the page dictates. Unfortunately, this will not help any of your users. The best solution to assure your RTL website displays the scrollbar on the correct side is to use a third party customizable scrollbar, such as jQuery Scrollbar or jScrollPane.

Home | Site Design | Banner Design | Code Den | Offsite Posts | Downloads | Photography | About Hanan | Hanan's CV | Contact Hanan
Copyright © 2009 Hanan Schwartzberg. All rights reserved.