javascript - Play Youtube iframe full screen - Stack Overflow

admin管理员组

文章数量:1399913

I've got a page with a embedded Youtube video in a iframe. I want to set the video to full screen whenever someone plays the video. I've tried many things but can't seem to get it working.

My code:

<div class="video-wrapper">
    <div class="video">
        <iframe id="home-video" allowfullscreen="allowfullscreen"     mozallowfullscreen="mozallowfullscreen"
                                        msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen"
                                        webkitallowfullscreen="webkitallowfullscreen" frameborder="0"
                                        src="">
        </iframe>
    </div>
</div>

I also tried to acplish this with the Youtube Api, but without success.

 <script src=""></script>

Anyone?

I've got a page with a embedded Youtube video in a iframe. I want to set the video to full screen whenever someone plays the video. I've tried many things but can't seem to get it working.

My code:

<div class="video-wrapper">
    <div class="video">
        <iframe id="home-video" allowfullscreen="allowfullscreen"     mozallowfullscreen="mozallowfullscreen"
                                        msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen"
                                        webkitallowfullscreen="webkitallowfullscreen" frameborder="0"
                                        src="https://www.youtube./watch_popup?v=dQw4w9WgXcQ">
        </iframe>
    </div>
</div>

I also tried to acplish this with the Youtube Api, but without success.

 <script src="https://www.youtube./iframe_api"></script>

Anyone?

• javascript
• jquery
• html
• iframe
• youtube-api

Share Improve this question Follow asked Sep 21, 2016 at 14:23 Mr. SamMr. Sam 40511 gold badge66 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I would try the fullScreen API for HTML5:

function fullScreen() {

    var e = document.getElementById("video-wrapper");
    if (e.requestFullscreen) {
        e.requestFullscreen();
    } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
    } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
    } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
    }
}

function YTStateChange(event) {
    switch(event.data) {
        case -1:
            fullScreen();
        break;
        case 1:
            // some code
        break;
        case 2:
            // some code 
        break;
        default:
        break;
    }
}

$(document).ready(function () {
    var player = new YT.Player( 'video-wrapper', {
        events: { 'onStateChange': YTStateChange }
    });
});

Use the youtube Iframe Api and set it up to listen to player events: https://developers.google./youtube/iframe_api_reference

Once you get the play event call your fullscreen function

            function launchIntoFullscreen(element) {
              if(element.requestFullscreen) {
                element.requestFullscreen();
              } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
              } else if(element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
              } else if(element.msRequestFullscreen) {
                element.msRequestFullscreen();
              }
            }

            function onPlayerStateChange(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                 launchIntoFullscreen(YOURIFRAME)
              }
            }

Using React Native...

I made this useEffect that works nicely. The only issue is that I'm using React Native Youtube Iframe and it does not listen for full screen requests on iOS yet, so that I had to add my own full screen button. If anyone has an idea on how to help the library owner, it would be weled. ;-) https://github./LonelyCpp/react-native-youtube-iframe/issues/45

This useEffect works by listening a playerFullScreen variable and changing the frame that holds the player style, as well as the screen orientation.

So that the player don't actually go full screen. It is the view that holds it that takes all the place of the screen.

// rely on useDimension and screen dimensions since useWindowsDimensions seems to have some issues with iFrames on React 0.63
// https://github./facebook/react-native/issues/29451
import { useDimensions } from '@react-native-munity/hooks'
import Orientation from 'react-native-orientation-locker'

const windowWidth = useDimensions().screen.width
const windowHeight = useDimensions().screen.height

/** Change the layout when the player goes fullscreen */
  useEffect(() => {

    // constants
    const boxedViewStyle: ViewStyle = {
      position: 'absolute',
      right: 0,
      left: 0,
      zIndex: 1,
    }

    const fullscreenViewStyle: ViewStyle = {
      position: 'absolute',
      top: 0,
      right: 0,
      left: 0,
      bottom: 0,
      zIndex: 2,
    }

    // Do the magic trick to change everything
    if (mounted) {
      if (playerFullScreen) {
        Orientation.lockToLandscape() // View horizontal
        setPlayerViewStyle(fullscreenViewStyle)
        setPlayerWidth(windowWidth)
        setPlayerHeight(windowHeight)
      } else {
        Orientation.lockToPortrait() // View
        setPlayerViewStyle(boxedViewStyle)
        setPlayerWidth(windowWidth)
        setPlayerHeight(PixelRatio.roundToNearestPixel(windowWidth / (16 / 9)))
      }
    }

    return (): void => {
      Orientation.lockToPortrait()
    }

  }, [playerFullScreen, windowHeight, windowWidth])

Here is what the JSX is looking like:

    return (
      <View style={[styles.playerView, playerViewStyle]}>
        {playerFullScreen && <StatusBar hidden={true} />}
        <YoutubePlayer
          videoId={videoId}
          play={mediaPlayerIsUp}
          onChangeState={onStateChange}
          height={playerHeight}
          initialPlayerParams={{
            preventFullScreen: true,
          }}
          onError={(error): void => {
            console.log('ERROR > MediaPlayerBox > YoutubePlayer: ', error)
          }}
          forceAndroidAutoplay={Platform.OS === 'android'}
        />
        <View style={styles.fullScreen}>
          <TouchableOpacity activeOpacity={0.8} onPress={toggleFullScreen}>
            <Icon path={paths.mdiFullscreen} color={colors.darkGrey} size={40} />
          </TouchableOpacity>
        </View>
        <View style={styles.close}>
          <TouchableOpacity activeOpacity={0.8} onPress={onClose}>
            <Icon path={paths.mdiClose} color={colors.darkGrey} size={40} />
          </TouchableOpacity>
        </View>
      </View>
    )

Notice the preventFullScreen that hides the fullscreen button of the player to use the one it is repaced by. It would actually be better to use a lister on the fullscreen button from YouTube once the issue on React Native Youtube Iframe will be solved.

Notice also the trick to hide the status bar, to look like full screen.

本文标签： javascriptPlay Youtube iframe full screenStack Overflow