Pause and FullScreen button hidden since IOS 10.2.1

[Olympiloutre]

Hi, I'm using YTPlayerView in very very small UIVIews on my app for a while now, and since I updated my phone to IOS10.2.1 the control bar on the bottom of the YTPlayerView exceed frame's size. (I cannot see pause and fullscreen buttons) I also have a device under IOS 9, and it fits perfectly so the problem is not located in my main code, but something changed since the last update.

Here is a screenshot of the cell.

How can I change the code of YTPlayerView.m (or asset.bundle idk) to adjust the bar ?

[rinov]

@Olympiloutre Hi, i have experience in this case. Probably the bar isn't relate YTPlayerView. it is the component of UIWebView, so it seems that it is not possible. If you want to use custom bar, we have to use AVPlayer or custom html5 video tag. More simple way is set controls to 0 in your playerVars before loading a video. Them, add custom bar to ytplayerview.

[Olympiloutre]

Thanks a lot that's I'll try this. I remember now a section on the documentation about controling YTPlayerView outside from it. Also I remembered that putting controls to 0 didn't worked for me, control bar was still visible.

Anyway I'll try this today and I come back to tell you (and everyone) if it worked.

[Olympiloutre]

@rinov Just before I start to add a custom bar, I was thinking that it could be more interesting in my case to override HTML and CSS. If you look closely to the screenshot I posted, there is another issue I couldn't fix: title's size, which is too big. At the time I gave up because it wasn't a huge problem.

Do you know how I can gather the raw html/css code from the video, so I'll have a sample to determine which properties I have to override? Also if I want to modify these I have to re-write it on asset.bundle, am I right?

Thanks a lot

[rinov]

Do you know how I can gather the raw html/css code from the video, so I'll have a sample to determine which properties I have to override?

Unfortunately this library is not provide the way to customize the html/css. so you can get the raw html/css code and you can modify it, but it will not use when loading a video. In addition, to modify library code is not recommended, because it will be deleted when you update this and makes it difficult to maintenance.

Also if I want to modify these I have to re-write it on asset.bundle, am I right?

However your idea is exactly correct. It might be better to challenge that way at the first time.

[Olympiloutre]

@rinov Okay I made a few tests on the CSS, none of them was concluding... By the way, don't worry for maintenancy, I don't use cocoapods so I copied YTPlayerView.m .h and asset.bundle directly on my project. This way I can modify wathever I want to fit my needs.

Concerning the tests, when I said that I wanted to access the raw CSS/HTML of the embedded video, this was to know the exact CSS path to modify specific HTML tags. I read that I could put Safari into IOS WebDoc emulator, so that's hat I did. (Under Developpment > User Agent > Safari IOS 10 Iphone)

I recorded which HTML tags has to be modified, and then trouble started. For now I just tried to reduce title's size. I opened the file Assets.bundle/Assets/YTPlayerView-iframe-player.html and I added my CSS code everywhere but it didn't affect the view. The code is also really simple:

.ytp-title-text span { font-size: 10px !important; }

I added it on < head>< style>, I created a < style> tag in < body> to put the code in it, etc... Nothing worked, neither on IOS10 nor on IOS 9. I'm starting to consider that the CSS is not applied because the raw HTML is added due to a Javascript code. Do you have any clue on why the CSS is not taken in account? Have you done this before?

[rinov]

@Olympiloutre I'm sorry to late response here.

I added it on < head>< style>, I created a < style> tag in < body> to put the code in it, etc... Nothing worked, neither on IOS10 nor on IOS 9. I'm starting to consider that the CSS is not applied because the raw HTML is added due to a Javascript code.

I guess you're right. so you should put the code dynamically. BTW css is applied of the last one if the priority is same. This case is imported from JS by YoutubeIFrameAPI. so if you modify the css, you have to execute the code after deployment html/css using YoutubeIFrameAPI. That timing is just YoutubeIFrameAPIReady.

e.g.

// MARK: - YoutubeIFrameAPIDelegate
func youtubeIFrameAPIReady(...) {
 player.webview.stringByEvaluatingJavaScript(from: "document.getElementById('hoge').style.fontSize='10px'")
}

[BostoNymphO]

Hi

[csbubbles]

Any comments/update on this issue? The "full-screen" button is still absent on iOS 11 while it does show up on iOS 9. Reproducible even in the simulator. See the screenshot:

[rafaelrsilva]

I guess the problem is not with this helper. It seems to be occurred because of small space when the phone is in portrait. See image below:

In landscape mode, the buttons are shown as expected

[SumeetMourya]

I have the same issue: fullscreen button is appear behind the View title. iPhoneX (iOS 12.0) and iPhone5s (iOS 10) I don't have this issue, but on iPhone6 iPhone (iOS 12.0) I am having this issue. Now I don't have any idea how to fix this. Note: as @rafaelrsilva shared View controller its supports orientation but In application I don't have that view supporting orientation.

[duchuy]

i have the same issue, fullscreen button is not showed up inside iphone iframe

i change the parameters: playerVars: { controls: 1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3, autoplay: 1, modestbranding: 1, playsinline: 1, fs:1, allowfullscreen: 1 },

to

playerVars: { autoplay: 1, playsinline: 1, fs:1, allowfullscreen: 1 },

[SumeetMourya]

@duchuy : can you share your view screenshots.