Quick aside on the post immediately below: getting an embedded YouTube video to be both playable and respectful of the z-index of a position: fixed; div like the one on the top of this here blog was much more tricky work than I bargained for, and than I feel like it ought to be. What I finally found to be necessary:

  1. Include the magical ?wmode=transparent in the iframe src link, and make it the first thing in the query string. That last part is weird, but I swear it didn't work when I tried ?rel=0&wmode=transparent.
  2. As many people suggest, I put a wrapper div around my iframe for browser responsiveness, and found I had to assign a low z-index to both the wrapper and the iframe itself. That's maybe not so surprising. Here's the weird part: it didn't work with a negative z-index value. It had to be at least 0 (while still lower than the fixed div, obvs).

As you can tell, all this still looks like a bunch of weird voodoo and I feel like my solution is a bit cargo cultish in that I doubt every detail is really necessary to be exactly as I have just described, but it only worked for me after I did All the Things, and I have to admit I don't understand which thing was the thing that did the trick so I am reluctant to mess with any of it any more now. Sometimes it would go behind the fixed div as desired, but you couldn't play the video. Then I could make the controls work again, but the z-index wouldn't work and the video would scroll over the div. It was insane.

Really, I just wish it Did the Right Thing automatically in the first place. Took me more than an hour just to embed a damn video. In 2017.

2017-11-01 18:19:44+00:00