better software through user-centered design

Posts tagged ‘youtube’

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

%d bloggers like this: