Question

So I’m working on a mobile site that has some videos on it. I am using the provided YouTube API for switching between flash and HTML5 on different devices, but I am using custom thumbnails for those for a couple different reasons.

I use some javascript to hide the YouTube iframe until a user clicks on a picture, and then it is supposed to swap out the image for the video onClick, calling the switchItUp method.

        var video = document.getElementById("VideoID");
        var image = document.getElementById("PlaceholderImage");
        video.style.display = "none";

        function switchItUp() {
            var video = document.getElementById("VideoID");
            var image = document.getElementById("PlaceholderImage");
            image.style.display = "none";
            video.style.display = "block";
        }

The YouTube code, as specified by the API, is as follows (and works when on the page alone):

<iframe src="http://www.youtube.com/embed/BaKcl0Qg13o?autoplay=1" width="300" height="190"></iframe>

Here’s the fun part.

• This works great in Safari on 4.0.
• In 4.1 the onClick shows the video, but you can’t play it.
• In 4.2 the video doesn’t show at all, but leaves a giant blank space on the page when the image hides.

It works great on all the desktop browsers, so debugging this is a problem.

Any help is appreciated! TYIA!

---

EDIT: The player must be on autoplay for the swap to work on 1 click, so it must start out as display:none on the page.

Also, would the container cause this problem? It’s currently rendering inside a <span> on the page, that doesn’t have display:block set before display:none.

Answer 1

Because of the autoplay doesn’t work in 4.2 we decided to get rid of the thumbnail swap. There isn’t a way to do this that works across all iOS versions. So we are just using some youtube-generated thumbnails.