We Keep Coding

next js Iframe video auto full screen on iOS mobile

I have a problem with my Iframe I put on my next js app.
The code cannot be easier :
<iframe
id="xxxx"
src={urlWebTv + '&playsinline=1'}
className={styles.iframe}
allowFullScreen
allow={'autoplay'}
loading={'eager'}
/>
When I click "Play" on my video, it automatically switches the video to full screen on my iphone... I tried with/without the param : playsinline. It doesn't change anything.
Could you help me ? Thank you.
(It works ok on Android and Web Browser...)

How can i detect video if streaming is stopped from webrtc initiator?

I'm using webrtc for screensharing application. Everything works without problem. But when user right click to something and click "run as administrator" video streaming is stopped. ( because desktop screen changes to secure desktop. At that moment i get following error logs on console ( Visual studio Code )
DxgiDuplicatorController failed to capture desktop, error code Initialization failed
Capture: Unable to get cursor info. Error = 5
same logs repeat until screen changes back to normal desktop again.
My Question is how can i detect that it cannot capture screen for streaming ?
How can i know video streaming is stopped ? or blank or empty stream ?

React web app to launch and request fullscreen on load - edited

I've deiced to reword the question after more hours of attempting hacks and fixes, with no end result. I am using the SCREENFULL npm for this.
This web application is a fullscreen interactive UI for a menu system used by employee's. I desired to either have the app launch into fullscreen upon loading OR detect if fullscreen to display prompt button to enable fullscreen and launch the app. Neither seem to be doing the job at all.
My attempts included:
goFullScreen (){
screenfull.request();
}
<button onClick={(e) => this.goFullScreen()}> enable full screen </button>
works fine. Goes full screen. Now to detect to display the app (loggin page, menu etc) or only the fullscreen button (that way the app can only be view in fullscreen).
screenfull.on('change', () => {
if (screenfull.isFullscreen) {
console.log("it freaken works");
return (
<h1> hi </h1>
)
} else if (!screenfull.isFullscreen) {
// display button to go fullscreen
}
});
Does not return the <h1> hi </hi> or any thing within return, but the console does log. Strange.
UPDATE:
I decided to try a DidComponentMount (along with javascript's "onLoad" events) :
componentDidMount () {
screenfull.request();
console.log("request happened");
}
Well, the request did happen, but the fullscreen did not enable. After debugging an error checking I get a webkitfullscreen error using the screen error detector included in the package.
I have no idea why this won't work, even so why this is so difficult.
Is there a work around for this, or am I just making this a lot harder then it should be?
This web app is only running on a Android tablet and google chrome browser.

The solution was simple. https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
It was with the manifest json to get my exact desired result.

Is it possible to programatically trigger an onClick on a WebView with React-native?

The reason I want todo this is so I can open up a Embeded youtube video in Full screen. At the moment, if I click on the Webview it opens up the youtube video into the native IOS video player. This is what I want.
However, I need to be able todo this programatically without the client clicking it. Why? The user clicks on an image inside a image gallery (image only - no video), so I close the gallery, and this is when I want to open the WebView (programatically trigger a click on it) in full screen (note: when clicking on webview, it opens the youtube video into the player straight away).
Is this even possible?
There are other ways around this which would involve changing the UI/UX, I'd want to try avoid this (if possible).

If you want to use react-native app to view youtube video in full screen, use below code:
$ npm install react-native-youtube -S
$ react-native link
<YouTube
videoId="KVZ-P-ZI6W4" // The YouTube video ID
play={true} // control playback of video with true/false
fullscreen={true} // control whether the video should play in fullscreen or inline
loop={true} // control whether the video should loop when ended
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
Refer to this link for more details.

My answer is around this question only:
Is this even possible?
=> Yeah possible
If you want to show youtube on Webview for React-native. Here is the link for you:
https://dev.to/mutatedbread/lazy-approach-to-display-youtube-videos-in-a-react-native-app-bfc
It definitely works for both android and ios (I tried it before).
There is one problem that: "you can not go fullscreen with Android."
It happens for all types of media that showed with webview of Android.
This is because Android pollicy. (however they allow to override that)
=> Read this: https://developer.android.com/reference/android/webkit/WebView.html (search for "Full screen support")
To pass by, you can search for some project that re-implement a react-native Webview component for Android. Here is the one i used:
https://www.npmjs.com/package/react-native-android-wv-video but there are others.
If you want self implementation, here is the link:
Playing HTML5 video on fullscreen in android webview
Finally:
After you solve the fullscreen issue for android, you can take advantage of youtube iframe to force auto start or auto fullscreen when load youtube video with this:
https://developers.google.com/youtube/iframe_api_reference
(If you follow instruction from the first link inside this answer, you already had youtube iframe)

html5 audio only loading after refresh with ratchet, push.js

I'm clicking through to a page that has html5 audio on a mobile site that uses Ratchet.js ( and push.js ) but the html5 audio elements only load if I do a full page refresh or if I use data-ignore="push" on the link.
Why is this and how can I make it work without using data-ignore="push" ?