I created a solution in React for entering and exiting fullscreen mode on a Vimeo player, depending on the view mode (landscape or portrait). When the user changes the phone’s orientation from portrait to landscape, the Vimeo video switches to fullscreen. It exits fullscreen when the user returns to portrait mode.
This works perfectly on every iPhone (iOS – Safari, Chrome). However, on Android (Chrome), I get the message: “Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.”
Fullscreen is enabled only after I click the play button on the video and then change the phone’s orientation.
import Vimeo, { EndEvent, PauseEvent, PlayEvent } from "@u-wave/react-vimeo";
import Player from "@vimeo/player";
const CoursePlayer = () => {
const vimeoPlayerRef = useRef<any>(null);
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
useEffect(() => {
if (isMobile) {
window.addEventListener("resize", (event) => {
if (window.innerHeight > window.innerWidth) {
console.log("Orientation changed: Portrait");
changeViewMod(true);
} else {
console.log("Orientation changed: Landscape");
changeViewMod(false);
}
});
return () => {
window.removeEventListener("resize", () => {});
};
}
}, []);
const changeViewMod = (currentViewport: boolean) => {
if (!vimeoPlayerRef.current) {
console.warn("Vimeo player ref is not ready");
return;
}
const playerElement = vimeoPlayerRef.current.player?.element;
if (playerElement) {
const player = new Player(playerElement);
if (!currentViewport) {
player.requestFullscreen().then(function() {
console.log('enter the fullscreen');
}).catch(function(e) {
console.error(e);
});
} else {
player.exitFullscreen().then(function() {
console.log('exit the fullscreen');
}).catch(function(e) {
console.error(e);
});
}
}
return (
<>
<Vimeo
showTitle={false}
video={currentLesson.video?.ID}
responsive={true}
playsInline={true}
autoplay={false}
ref={vimeoPlayerRef}
/>
</>
)
};