使用Javascript的jQuery移动响应视频

Question

我已经使用javascript实现了自适应视频。它运行正常，但jquery mobile http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js 正在移除右边距和/或无法使视频居中。

如果删除了上面的jQuery Mobile代码，它可以正常工作。

我需要它以视频网址周围没有其他标签为中心，因为代码是php脚本的输出。

Html视频代码：

<p style="text-align: center;"><strong><iframe src="http://www.youtube.com/embed/MItGoIxoVGk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></strong></p>

响应式视频Javascript代码：

// Find all YouTube & Vimeo videos
var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

$(this)
.data('aspectRatio', this.height / this.width)

// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

var newWidth = $fluidEl.width();

// Resize all videos according to their own aspect ratio
$allVideos.each(function() {

var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));

});

// Kick off one resize to fix all videos on page load
}).resize();

jsfiddle链接：http://jsfiddle.net/flymen777/hobzq6fu/