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=”http://www.youtube.com/embed/{{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 = $(‘div.mobile-question-tile-inner iframe’);
iFrame.attr(‘src’, iFrame.data(‘src’));
}

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

Link to issue in GitHub: https://github.com/bradbirdsall/Swipe/issues/36

About these ads

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 92 other followers

%d bloggers like this: