I have a stream embedded into my website, however there is an issue when viewed on mobile devices. Because of the small device width, the CSS elements are pushed causing some of the functionality to not work correctly.
The difference between the embed and viewing the stream at the same width on twitch is that with the embed, there is the twitch logo on the bottom right which pushes the other elements and causes this offset. Here is a picture of the problem.
On Twitch:
On my website:
I am not really sure what can be done to fix this because since I am loading an iFrame from Twitch, the CSS cannot be modified on the iFrame. Is there anything I can do because it is very hard for users to play the stream on iOS because you have to manually click play and because of the offset, the button does not register correctly.
What size is your embed? The minimum size for the embed is 400x300, so it might be pushing the elements due to sizing? If not, let me know! I can follow up with the player team.
The width of the embed is 373px when displaying on iPhone 6 (Max width for iPhone 6 is 375px). The width is 318px when displaying on iPhone 5, however I am mostly concerned with the iPhone 6 width.
When I edit the CSS with Chrome Dev tools, the issue appears to be occurring with the <div class="player-volume"> is interfering with the <div class="player-buttons-right">.
If the volume bar can be scaled down a bit at smaller resolutions, it would be fine.
The other option would be an ability to hide the Twitch Logo on small resolutions with the iFrame. I understand Twitch wants to be branded but it is causing issues for mobile users.
