How to get Picture in Picture Multitasking Working with YouTube

Permalink ∞

picture in picture on the iPad

Ever since the picture in picture multitasking mode got introduced for the iPad, I’ve been really frustrated with Google refusing to update their YouTube app to support the feature. But even worse: Safari supports the feature for HTML5 video, but YouTube actively hides the controls to activate it on their website.

Not much we can do about their app, but the website must surely be fixable, right?

If you google for the problem, you will find this Reddit post offering a bookmarklet, that will turn the native video controls back on. I tried that, but I couldn’t get it to work. The native controls did show up, but only for half a second, then YouTube turned them automatically back off. I guess they really want you to use their custom controls.

Nothing that more (or at least different) javascript can’t fix:

javascript:document.getElementsByTagName("video")[0].webkitEnterFullScreen()

Create a bookmark and replace its address with this javascript.

When pressed it will activate the full screen mode for the first video that it can find on a website. The native video controls will be visible in full screen mode, including the picture in picture button.

The bookmarklet will work with any website that uses HTML5 video. Hope it helps.

Swift Syntax Highlighting with Jekyll

Permalink ∞

I just spend a few hours trying to find out how to embed swift snippets in my blog posts. I use Jekyll for this site, which already comes with Pygments for syntax highlighting. So adding a code block with some Swift code, already worked. The result looked something like this:

highlight1

As a webdeveloper I always used TextMate (or later Sublime Text) with the Twilight theme. I ported that to Xcode when I got into iOS development and have been using it there ever since. Xcode highlights the code like this:

highlight2

Shouldn't be too complicated, right? Get into the CSS file, adjust a few things. Well here is how that turned out:

highlight3

Seems like the Pygments swift highlighter that you get with Jekyll is kind of old. It only detects a couple of keywords but not even all of them. The Jekyll configuration did point me to the Rouge highlighter.

So I did a gem install rouge and added the following to my _config.yml:

highlighter: rouge

And here we go, much better:

public func hello(name: String) -> String {
  return "Hello \(name)"
}

println(hello("world"))

Here's an more complex example:

/// just some class that doesn't do much
public class SwiftHighlightExample {
  private let exampleNumber: NSNumber

  public init(intValue: Int) {
    exampleNumber = intValue as NSNumber
  }

  public var stringValue: String {
    return exampleNumber.stringValue
  }

  public func printNumber() {
    println("Number: \(self.numberAsString)")
  }
}

let example = SwiftHighlightExample(intValue: 5)
example.printNumber()

While this example doesn't do anything meaningful, it should at least demonstrate the highlighting. It is not perfect and I had to add a few css hacks, to achieve some of the details that the highlighter wouldn't support otherwise. Still, unlike Xcode the highlighter can only guess if something is a class name, a function name or what ever.

You can have a look at css here in case you are interested. Feel free to steal it.