better software through user-centered design

Swipe JS YouTube Fix

Many have ran into an issue using Swipe JS and trying to embed YouTube videos via iframe after a swipe. At the time of this writing there is no solution that I saw, but it seems to be related to CSS transitions. I had very little time to understand what the true issue is, but I came up with a workaround that seems to work well.  It may seem a bit hacky, but here it is.

In the view there is a line as such:

iframe width=”{{width}}” height=”{{height}}” data-src=”{{video_id}}?rel=0″ src=”about:blank” frameborder=”0″ allowfullscreen></iframe

Notice the src=”about:blank”, we will set the real source after the transition.

We have a callback from Swipe that is called when the transition ends “transitionEnd”. In this callback I test to see if it is the correct slide (in this case it is the last slide in my list).

If it is the correct slide, I set the iframe src attribute. The transition has already ended so there is a blank iframe momentarily bit this could easily be pointed to a loading graphic or the like.

if (id === “thanks”){
var iFrame = $(‘ iframe’);

If anyone else has ideas on the real fix for this, I would love to learn it.

Link to issue in GitHub:


Comments on: "Swipe JS YouTube Fix" (2)

  1. Today, I ran into the Youtube-swipe-issues myself and one solution I found quite reasonable was to use youtubes preview image as a placeholder which gets replaced on swipe-end by the real iframe-embed..
    If anyone knows of a better solution, please let me know!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: