Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

iOS7 YouTube Height Issues - iPad and iPhone not displaying properly


Hi there!

I'm having trouble getting a YouTube video to display correctly on iOS7.

On all desktops, browsers, and iOS versions everything looks great.

On iOS7 -- the height is not correct.

I've taken two screenshots to illustrate my problem.

Working: http://imgur.com/kwqAlcw,8xSplFc#0

Not Working: http://imgur.com/kwqAlcw,8xSplFc#1

Feel free to test on your own devices --> you'll see exactly what I mean: http://getjackedin.staging.wpengine.com/test/

bc.. <div id="videoContainer"></div>

<script>
jwplayer("videoContainer").setup({
file: "http://youtu.be/pVTVAtP11lY",
image: "http://www.getjackedin.com/wp-content/uploads/2013/08/fitness-deadlift-740x416.jpg",
width: 740,
height: 416
});
</script>



Any advice? Thanks!!

-Josh


93 Community Answers

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you see the problem here?

http://www.longtailvideo.com/support/jw-player/29236/basic-youtube-stream

JW Player

User  
0 rated :

Hey Ethan!

Thanks for the reply. YES, the problem still exists --- even on that page.

Here is a screenshot: http://imgur.com/cEqzRTw

At the moment, this is a VERY serious problem. Our website relies on users watching video from ios7 devices. We are losing serious revenue.

Since I'm a premium customer, should I open a direct e-mail ticket?

-Josh

Ethan Feldman

JW Player Support Agent  
0 rated :

We are going to fix this when we updated to YouTube HTML5 support natively.

JW Player

User  
0 rated :

I am experiencing the same problems with iOS7 devices. The videos display fine in iOS6.

Any idea on when this will be fixed?

Ethan Feldman

JW Player Support Agent  
0 rated :

When we update to YouTube HTML5 natively.

JW Player

User  
0 rated :

When it will be ?

Ethan Feldman

JW Player Support Agent  
0 rated :

For 6.8. Not sure of the ETA for the release exactly.

JW Player

User  
0 rated :

Given the release cycle to date, I'd say it will be at least mid-December...

Ethan Feldman

JW Player Support Agent  
0 rated :

Possibly, can’t be certain though.

JW Player

User  
0 rated :

No work-around for this issue? A fix mid-december is... quite far away to say the least.

Ethan Feldman

JW Player Support Agent  
0 rated :

Not right now, sorry.

JW Player

User  
0 rated :

I'm gonna put together a third-party "patch" for this.

Should be available in the next couple of weeks.

I'll look at fixing YouTube playlists on iOS while i'm at it.

Follow me on twitter if you are interested - @jherrieven

Ethan Feldman

JW Player Support Agent  
0 rated :

I am interested in this for sure.

JW Player

User  
0 rated :

Any movement on a workaroundf for this yet. I have confirmed that this does not work when using Single YouTube file or JSON playlist of YouTube files. Only get 1 inch tall video. I have tried with and without playbar and every CSS option known to man, but no luck.

Ethan Feldman

JW Player Support Agent  
0 rated :

We don’t support playlists yet.

JW Player

User  
0 rated :

As promised, I've written a "patch" to overcome a number of YouTube / JW Player 6 / HTML5 mode issues.

I need to do a proper write-up, but in the meantime you can find some example implementations here:

http://dev.powered-by-haiku.co.uk/jw-html-config/examples/jwtube/single-file.htm

Ethan Feldman

JW Player Support Agent  
0 rated :

Looks good.

JW Player

User  
0 rated :

This is also a VERY SERIOUS problem for me.. :-(
Hope for a patch very soon og I need to find another player... I have many users seeing videos on their iPad.. :-(

Ethan Feldman

JW Player Support Agent  
0 rated :

I would use the patch that James provided above until we release this officially.

JW Player

User  
0 rated :

Pleeeeease help!! :-)

Ethan Feldman

JW Player Support Agent  
0 rated :

Look at the post that James made ;-)

As promised, I've written a "patch" to overcome a number of YouTube / JW Player 6 / HTML5 mode issues.

I need to do a proper write-up, but in the meantime you can find some example implementations here:

http://dev.powered-by-haiku.co.uk/jw-html-config/examples/jwtube/single-file.htm

JW Player

User  
0 rated :

Hi,

This is really good.

When I try I get this error: Error loading media: file not found.

Pls help.

Thanks,

Fernando

JW Player

User  
0 rated :

Hi Fernando

Do you have a link where you have implemented this so I can help debug?

Cheers
James

JW Player

User  
0 rated :

Hi James,

Unfortunately this is an internal site for now but the code I'm using is this and jwtube.setType() returns mp4:

var startPlayer = function (filePath) {
var myPlayer = jwplayer("popupVideo").setup({
//'file': $(this).attr("data-videoPath"),
'file': filePath,
'type': jwtube.setType(),
'width': 660,
'height': 400,
'events': {
onReady: function (evt) {
populateCluetip(theObj);
}
},
'modes': [{ type: 'flash', src: '/content/script/other/jwplayer/jwplayer.flash.swf' },
{ type: 'html5'}],
analytics: {
enabled: false,
cookies: false
}
});
}

Thanks,

Fernando

JW Player

User  
0 rated :

Hi James,

I forgot to mention that without using this workaround it works fine for desktop browsers and ios6 + safari. With ios5 is even worse the player doesn't even fire the onready event.

My problem is with ios7 + safari

JW Player

User  
0 rated :

Hi Fernando

Is this for JW 5 or 6? My patch is targeted at JW 6 in HTML mode.

I know the issue exists with JW 5 too but I've focused on JW 6 for now. I should be able to get a JW 5 version available for next week if you need.

James

JW Player

User  
0 rated :

Hi James,

This is for jw 6.

Thanks,

Fernando

JW Player

User  
0 rated :

Ok, you are using a JW 5 embed pattern...

Let me set up a debug/test page for you. What is the YouTube URL you are using?

James

JW Player

User  
0 rated :

I'm using: http://www.youtube.com/watch?v=K8JuaYVJ_LE

Ethan Feldman

JW Player Support Agent  
0 rated :

Generally a link would be needed for support.

JW Player

User  
0 rated :

Hey Fernando

So I've taken your code and placed it in a debug page here:

http://dev.powered-by-haiku.co.uk/jw-html-config/debug/fernando.htm

On the PC (Chrome/ Firefox/ Opera) I get an "event handler" error - which is probably due to using a JW5 embed technique - however it still loads and plays.

On my iPhone iOS 7.0.3 it loads and plays fine.

It doesn't appear to work on my iPad iOS 5.1.1 - but it should (as my examples were working, but no longer appear to be) - i'll be looking into this!

This suggests that there is something outside of the code you have provided that is causing an issue for you on iOS7 - maybe the "populateCluetip" function?

I suggest you rewrite your embed to be JW6 compatible first - without the "modes" and "events" blocks and see where you are at then.

Cheers
James

Ethan Feldman

JW Player Support Agent  
0 rated :

Nice

JW Player

User  
0 rated :

Hi Fernando

Just checked this again this morning and it works fine on all my devices - even with the JW5 embed approach.

http://dev.powered-by-haiku.co.uk/jw-html-config/debug/fernando.htm

The event handler error was due to me not having defined "theObj" - are you sure this is this available to you as a global variable?

Cheers
James

JW Player

User  
0 rated :

HI James,

thanks a lot for your example.

I changed the code to be:

var myPlayer = jwplayer("popupVideo").setup({
//'file': $(this).attr("data-videoPath"),
'file': filePath,
'type': jwtube.setType(),
'width': 660,
'height': 400
});

myPlayer.onReady(function (e) {
$('#popupVideo.help-message').remove();
populateCluetip();
});

I also realized that I was using jwplayer.js version 6.0.2813 so I updated to the version you're using in your example. I don't know if this could be an issue too.

After doing all that I now get this error:

HTTP "Content-Type" of "text/html" is not supported. Load of media resource http://www.youtube.com/watch?v=K8JuaYVJ_LE failed.
Error playing media: MediaError { code=4, MEDIA_ERR_ABORTED=1, MEDIA_ERR_NETWORK=2, more...}

Fernando

JW Player

User  
0 rated :

So "filePath" is being set to "http://www.youtube.com/watch?v=K8JuaYVJ_LE" ?

What happens if you temporarily remove the "onReady" event binding:

bc.. /*
myPlayer.onReady(function (e) {
$('#popupVideo.help-message').remove();
populateCluetip();
});
*/



JW Player

User  
0 rated :

PS: Does this page work for you?

http://dev.powered-by-haiku.co.uk/jw-html-config/debug/fernando.htm

JW Player

User  
0 rated :

That's right.

"filePath" is being set to "http://www.youtube.com/watch?v=K8JuaYVJ_LE"

I removed onready. Still getting same error.

JW Player

User  
0 rated :

The page you created works for me

JW Player

User  
0 rated :

The video is inside a cluetip popup. Probably that's why is not working with your js file.

Without your js file (using 'type': setType()) it works fine except for ios7 safari

JW Player

User  
0 rated :

Ahhh...

So the JW Player is not actually "setup" on the page until the user clicks something - which then loads it dynamically in a popup?

JW Player

User  
0 rated :

Updated the demo page to take account of this scenario:

http://dev.powered-by-haiku.co.uk/jw-html-config/debug/fernando.htm

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you have an example of this running on your own site Fernando?

JW Player

User  
0 rated :

that is not working for me... i don't know why...
http://pre-www.lanacion.com.ar/1633913-no-woman-no-drive-la-satira-sobre-una-medida-saudi-que-es-furor-en-el-mundo


pd: i made a modification to "jwtube.js"

this line:
iOSVersion:function(){if(this._iOSVersion===null){this._iOSVersion=(this.isMobile()||this.isiPad())?parseFloat(this.getAgent().match(/os ([d_]*)/i)[1].replace("_",".")):false}return this._iOSVersion}

to:
iOSVersion:function(){if(this._iOSVersion === null) { this._iOSVersion=(this.isMobile()||this.isiPad())?parseFloat(this.getAgent().match(/os ([d_]*)/i)[1].replace(/_/g, ".")) : false } return this._iOSVersion }

because my device ios version was 7_0_3 and it broke the original code..

JW Player

User  
0 rated :

The site is under development.

Jame's new page updated to load the player after clicking a link works for me on desktop and ios7 safari (I'm using a real ipad) but when I try in my page it works for desktop but doesn't for ios7. The thing here is that I'm using browserstack for ios7 to test my page. Maybe this is the reason why it is not working?

I don't know. I'll try to use a real ipad to test my page.

Thanks a lot for all your help.

Fernando

Ethan Feldman

JW Player Support Agent  
0 rated :

Ah, ok.

http://pre-www.lanacion.com.ar/1633913-no-woman-no-drive-la-satira-sobre-una-medida-saudi-que-es-furor-en-el-mundo seems to play for me.

JW Player

User  
0 rated :

@Fernando

Yeah, I think i'd need to see more of your code in order to debug any further. Hopefully its just a matter of using a real device.

@Sergio

I'm not sure why you've had to change anything - it has always worked with my examples on my iPhone iOS 7.0.3 - as does the link you have provided.

Ethan Feldman

JW Player Support Agent  
0 rated :

I wouldn’t advise changing things regardless . . .

JW Player

User  
0 rated :

without change that function returned null

i fixed my code before you answered. thanks anyway

JW Player

User  
0 rated :

You're right.. But that function is never actually used by jwTube.

So unless you are calling it directly it wouldn't make any difference!

I guess fixing your other code has helped resolve your issue.

JW Player

User  
0 rated :

Ah. I see what you've done. You ARE using it directly.

That function was originally included "just in case" - but I never ended up using it or indeed revisiting it.

It appears that it is useful for an implementation such as yours so I'll get it updated.

Cheers
James

Ethan Feldman

JW Player Support Agent  
0 rated :

Ah, interesting.

JW Player

User  
0 rated :

I've now updated the "jwTube" patch to include the @Sergio fix and to simplify the implementation when loading JW Player dynamically - such as in a popup.

I've included an example here:

http://dev.powered-by-haiku.co.uk/jw-html-config/examples/jwtube/dynamic-player.htm

Ethan Feldman

JW Player Support Agent  
0 rated :

Nice James.

JW Player

User  
0 rated :

Dear sir
I have tried to run below code, but it is not played correct on iPad/iPhone for iOS7.
What is the problem?
Still, the Youtube height problem is existing...
Please help me.

bc.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>
Peter MacIntyre
</title>
<script src="jwplayer/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jwplayer/jwplayer.js" ></script>
<script type="text/javascript">jwplayer.key = "wvQoCHa9K3fmb3pQfpDWMFKzpLXCLJN6cEa1nJ7H304=";</script>
<script type="text/javascript" src="jwplayer/jwtube.min.js"></script>
</head>
<script type="text/javascript">

function youtubePlay(title, description, thumbnail, url) {

$('#player').html("Loading the player ...");

document.location.href = "#";

var myPlayer;
myPlayer = jwplayer("player").setup({
width: 769,
height: 433,
sharing: {
code: encodeURI("<iframe width='640' height='360' frameborder='0' style='overflow: hidden;display: block;border: 8px solid black;-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;-moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;box-shadow: 4px 4px 14px #000;' marginwidth='0' marginheight='0' src='http://hdhathomes.com/player/MEDIAID'>"),
link: "http://www.hdhathomes.com/tour/MEDIAID/"
},
//primary: "flash",
autostart: false,
title: title,
description: description,
playlist: [{
image: thumbnail,
sources: [{
file: url,
}],
"type":jwtube.setType()
}],
/*
'modes': [
{ type: 'flash', src: 'jwplayer/jwplayer.flash.swf' },
{ type: 'html5'}
],
*/

});
//re_jwTube(myPlayer);
}
///////////////////////////////////////////06/06/2013 Modified by Niao Jina END////////////////////////////////////////

function makeEmbed() {
}
</script>
<body>

<div class="video_area">
<div id="player">Please click below image ...</div>
</div>
<img class="sub_video" onclick="youtubePlay("MAC FACT December 2012 Time to List, Home Prices are Increasing!","","http://www.hdhat13.com/h264/peterProImage.jpg","http://youtu.be/IXUAREZ7mGo");" src="http://www.hdhathomes.com/pictures/s_Screen Shot 2013-03-18 at 10.16.41 PM(1).jpg">
</body>
</html>


JW Player

User  
0 rated :

@Niao

There are a couple issues with your code:

1) Firstly, ensure you have the latest version of jwTube. You can get it here:

http://dev.powered-by-haiku.co.uk/jw-html-config/jwtube/jwtube.min.js

2) Move the *"type":jwtube.setType()* line to inside the "sources" block. It needs to be along-side the "file" setting.

3) Because this is dynamically created, you need to re-patch the player after the setup, and due to a JW bug in 6.7, you'll also need to re-get the player instance after the initial setup, this is done by replacing *//re_jwTube(myPlayer);* with *myPlayer = jwplayer("player"); jwtube.patch(myPlayer);*

4) PS: Watch out for those extra commas...!

I've created you an example that works here:

http://dev.powered-by-haiku.co.uk/jw-html-config/debug/niao.htm

Regards
James

JW Player

User  
0 rated :

Dear sir
Thanks for your help.
The url is displayed correct for me.
So, I have modified, but my site dose not play...
Please check the URL : http://evening.engellee.com/test/jw.html
I don't know what is the problem...

Please help me till the end.

Kind regards
Niao Jina

JW Player

User  
0 rated :

Dear
I am using JW Player 6.5.

JW Player

User  
0 rated :

Can you try downloading this again:

http://dev.powered-by-haiku.co.uk/jw-html-config/jwtube/jwtube.min.js

Make sure it's version 1.2 as this fixes a bug with JW6.5

Also, remove the comma after
bc.. "type":jwtube.setType(),

JW Player

User  
0 rated :

Dear James
I have done.
But, still exist issues.
Please check the URL again.
And, here is my full source : http://evening.engellee.com/test/jw.zip
Please download and analyze.

I wish a good news.

Kind regards
Niao Jina

JW Player

User  
0 rated :

If you success,
If it is possible, could you upload correct full source with JW Player resource?

JW Player

User  
0 rated :

Your previous link works fine for me now on both PC & iPhone iOS7.

http://evening.engellee.com/test/jw.html

Have you cleared the cache?

JW Player

User  
0 rated :

Wow, I have mistake, really, it is works good.
Dear James
Thanks a lot for your help.
I hope your happy new weeks.

Best regards
Niao Jina

Ethan Feldman

JW Player Support Agent  
0 rated :

Nice

JW Player

User  
0 rated :

Dear James
Please quickly help me....
http://tours.kal-soft.com/channel/13/Peter-MacIntyre#
Please go to Mac Facts menu below the main video player.
Then you can see 2 thumbnails, it is a Youtube video links.
By the way, as you see, when click thumbnails, "Error loading media: File not found " message is displayed.
What is the problem?

Please quickly contact me.
Thanks for your time.

Kind regards
Niao Jina

JW Player

User  
0 rated :

The error is displayed on PC(Mozilla Firefox).
On iOS7 it seems like to work fine.

Ethan Feldman

JW Player Support Agent  
0 rated :

The thumbs below seem to be non YouTube?

JW Player

User  
0 rated :

Dear sir
Did you clicked the "Mac Facts" menu?
The menu list include only Youtube video URLs.

JW Player

User  
0 rated :

Dear manager
I have fixed the problem.
I have added a comment about
primary: "flash",
i.e. replaced with
//primary: "flash",

Then, it fine works.

Thanks for your time.

Kind regards
Niao Jina

JW Player

User  
0 rated :

I would also suggest you upgrade your JW version on this page.

You are now using JW6.4

JW Player

User  
0 rated :

One final thing i'd suggest is to change the line:

bc.. "type":jwtube.setType()


to
bc.. "type":(jwtube.iOSVersion()>=7?jwtube.setType():"youtube")



This will ensure JW Player is only put into HTML5 mode when on iOS7 - giving a better default experience for PC users.

JW Player

User  
0 rated :

Dear James
Thanks again.

Ethan Feldman

JW Player Support Agent  
0 rated :

Glad you got it!

JW Player

User  
0 rated :

Hi

I have included James's Fix for io7 but when i include line

bc.. type:jwtube.setType()


JWplayer gives me error "Error loading media: File could not be played."
and filepath variable points to the youtube link but when i include link to any .mp4 player works fine

bc.. var jwp = jwplayer(el).setup({
image: previewimage,
height: contheight,
width: contwidth,
aspectratio:"16:9",
autostart: false,
file: filepath,
type:jwtube.setType()
});

jwtube.patch(jwp);




What could be the issue?
Thanks,
V

JW Player

User  
0 rated :

What version of JW are you using? If it is version 6.7 you'll need to modify your code to be:

bc.. jwplayer(el).setup({
image: previewimage,
height: contheight,
width: contwidth,
aspectratio:"16:9",
autostart: false,
file: filepath,
type:jwtube.setType()
});
var jwp = jwplayer(el);
jwtube.patch(jwp);



Failing that, can you provide a link?

JW Player

User  
0 rated :

Hello, just wondering if there's any update on when the iOS7 bug will be fixed globally on the JW Player. We're currently using the free player for development but are planning to go with the Enterprise version. However, this bug is a huge issue for us and is holding us back, and if it's not fixed soon we may have no other choice but to look for a different video solution. We've tried James's fix, but that has its own issues and is not a long term solution. Any update you have would be greatly appreciated.

Thanks,
RP

JW Player

User  
0 rated :

For sure, it's intended as a stop-gap.

Still, i'd be interested in understanding the issues if it means "jwtube" is not even a viable short-term fix for you.

JW Player

User  
0 rated :

Thanks for your help, James! The main issue we're having with the fix is that the controls don't show up for YouTube videos that are playing inline on iOS7.

Also, just curious if it's possible to define a custom image for YouTube videos through the JW PLayer?

Thanks,
Rani

JW Player

User  
0 rated :

Yeah, that's an interesting one...

I consciously chose to hide the YouTube controls and try to provide as much "functionality" as I could through the JW controls instead - even though this means you can't seek or select different quality levels directly - _you can via code_.

This was for the following reason:

One of the original feature points of JW Player was the provision of a consistent, visually rich user interface for web video - regardless of browser or technology implementation. I believe this why to date they only offer YouTube on PC through Flash - in order to maintain that control over consistency (iOS on mobile is the thorn in their side at the moment!).

In implementing an HTML solution, I wanted to play by the same rules and ensure (where possible) the user experience was consistent - preserving both the JW branding and the customer logo. Although it would have been easier to just allow the YouTube controls, I think you'll ultimately see when the JW Team provide a proper native YouTube implementation, these things done in a similar way - _except they have the original source code so will be able to properly hook-up seeking and quality selection!_

Depending on the timeline for an official JW fix (probably looking at mid-Jan 2014 at a guess) I could provide a version of "jwtube" which uses the YouTube controls instead of the JW ones, if you see value in that.

Regarding the custom image: Apple imposes a limitation of requiring the user to initiate a playback - this means you have to hand control to YouTube in order to capture that request - and the image is all part of that YouTube process... at least for the first YouTube video... You could potentially modify the images for subsequent YouTube videos that were part of a playlist.

Cheers
James

Ethan Feldman

JW Player Support Agent  
0 rated :

We are going to be adding this in 6.8, probably around Q1 (same time James said).

JW Player

User  
0 rated :

I have version 6.7 and your solution worked great.

Thanks James.

Ethan Feldman

JW Player Support Agent  
0 rated :

Nice

JW Player

User  
0 rated :

Hi.
I would really be happy if someone could help me here.
(I am a premium user, if this helps!) ;-)
I am not much of a coder and only know basic php, so I have some problems with this.
(And this is a big problem for me when my users cant see videos on their iPad on my site) :-(

I have downloaded the newest jwtube.min.js and added to my head.

But I cant get the code working.

Could someone please help me with this simple player code I have and fix it so it works with the patch?

<script>
jwplayer("myElement").setup({
file: "<?php echo $row['youtube'];?>",
image: "/uploads/myPoster.jpg",
autostart: true,
width: 800,
height: 500
});
</script>

(It gets the yt iframe link from my database)

Check it here:
http://www.hyggestedet.dk/flashplayer/hyggeplayer.php?videoid=278272

Regards,
Henrik from Denmark

Ethan Feldman

JW Player Support Agent  
0 rated :

I would look at this blog post on Jame’s site – http://powered-by-haiku.co.uk/?p=563

JW Player

User  
0 rated :

I tried but could not get it working.. :-(

JW Player

User  
0 rated :

@Henrik

The link you have provided does not have any reference to "jwtube" being loaded or used within the page. Are you sure this is the right link?

James

Ethan Feldman

JW Player Support Agent  
0 rated :

Maybe provide an update link?

JW Player

User  
0 rated :

Sorry it was the old link before updating... I will make a new link.. :-)

JW Player

User  
0 rated :

I tried here, but nothing happens...
http://www.hyggestedet.dk/flashplayer/hyggeplayeryt.php?videoid=278325#

Copied jwtube.min.js to the directory where the .php file is.

Added jwtube.min.js to the head and copied the text.

Where can the error be here?

JW Player

User  
0 rated :

I am getting close now... :-)

Two small questions..

Can I use Autostart?
And why does the loading icon keep "loading" ?

http://www.hyggestedet.dk/flashplayer/hyggeplayeryt.php?videoid=278325

JW Player

User  
0 rated :

Autostart is now working... :-)

Now I only need to fix the loading icon... ?

JW Player

User  
0 rated :

Its wierd... This link does only work ever 2. or. 3 time else it writes error loading media: File could not be played!.

What can the problem be here???
(Its a youtube video)

JW Player

User  
0 rated :

@Henrik

After a big of digging it turns out Google have slightly changed their API!

I've made an update to "jwtube" to cater for this - can you try the latest version:

http://dev.powered-by-haiku.co.uk/jw-html-config/jwtube/jwtube.min.js

Also, I'd suggest you change

bc.. "type":jwtube.setType()



to

bc.. "type":(jwtube.iOSVersion()>=7?jwtube.setType():"youtube")



Cheers
James

Ethan Feldman

JW Player Support Agent  
0 rated :

Ah, nice.

This question has received the maximum number of answers.