As we will know from other questions on the site to in iOS Mobile Safari we have these tasty attributes webkit-playesinline
and the more concise playsinline
to disable auto fullscreen of videos.
Despite that miracle I'm still unable to figure out how to add this to YouTube html5 embeds. As expected the YouTube <video>
is contained within an <iframe>
.
the ideal result is something as the following:
<video
tabindex="-1"
class="video-stream html5-main-video"
style="width: 736px; height: 414px; left: 85px; top: 0px;"
src="blob:https://www.youtube.com/6889sdad6d2-ec51-49ca-b357-a5bd9c3ede71"
webkit-playsinline="true"
playsinline="true">
</video>
I have tried, in vain, to do this via jquery.
Any thoughts or ideas how to do this?
Exit full screen Tap the video. At the bottom of the video player, tap full screen exit or swipe down on the video.
Method 1 of 5: If this is the reason you're encountering a full-screen error, pressing the F5 key or clicking the "Refresh" button will reload the YouTube page and fix the problem.
Locate the video you wish to use and click on the Share link located beneath the video. 2. Next, click on the Embed icon The embed code will then be displayed. Copy and paste the embed code into your course.
Add playsinline=1
paramerer to the embed url. Add ?
or &
before as appropriate; ?
if the only paramerter, &
to concatenate with other params.
Example:
<iframe
src="https://www.youtube.com/v/VIDEO_ID?playsinline=1">
</iframe>
From YouTube iFrame Player API:
This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Valid values are: 0: This value causes fullscreen playback. This is currently the default value, though the default is subject to change. 1: This value causes inline playback for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With