Fixing setAttribute(...) is undefined error when setAttribute actually is defined

I was fixing up some website issues today. One of the problems was with a page that contained a youtube video. Because Youtube uses static sizing on their embed codes, the video was breaking out of the page on small screen sizes. I found a solution to this issue here: Fluid Width Video.

The site this was for uses plain js rather than jQuery, so I re-wrote the solution given in the CSS Tricks article. However, when I ran it, I recieved the following error:

TypeError: vid.setAttribute(...) is undefined

Yet I could go into the console and run vid.setAttribute (with the script paused where the error occured) with no problem. After much head scratching I finally decided to try the page in Chrome, rather than FireFox, which is what I was using. And I now saw what the real problem was - Chrome did not report that .setAttribute was undefined, but rather that .removeAttribute was not defined, which was the line below. Firefox (Firebug) was confusingly throwing the error a line early.

I was trying to use chaining, but setAttribute does not return the element you are calling it from. So you can't use chaining with it. The lesson - if the debug info in one browser doesn't make sense, try another.