Question

如何使用外部容器输入iframe的全屏？

当我执行此代码时：它会为此<div class="video-player">输入全屏，但使用youtube的iframe不会调整大小。我该怎么做才能解决它？

我正在使用youtube api，我的代码如下：

＆＃13;

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player, continer;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '100%',
    width: '100%',
    videoId: 'izGwDsrQ1eQ',
    playerVars: {
      autoplay: 0,
      html5: 1,
      theme: "light",
      modesbranding: 0,
      color: "white",
      iv_load_policy: 3,
      showinfo: 0,
      controls: 0
    },
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  var player = event.target;
  continer = $('.video-player');
  setupListener();
}

function stopVideo() {
  player.stopVideo();
}

function setupListener() {
  $('button').addEventListener('click', playFullscreen);
}

function playFullscreen() {
  player.playVideo(); //won't work on mobile

  var requestFullScreen = continer.requestFullScreen || continer.mozRequestFullScreen || continer.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(continer)();
  }
}

＆＃13;

.video-wrapper {
  height: auto;
  position: relative;
  padding-bottom: 15px;
  background: $whiteRGBA;
  border: 2px solid $whiteRGBA;
  border-radius: 8px;
  margin: 12px 0 9px;
}
.height-checker {
  position: relative;
}
.canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0);
}
.height-checker {
  position: relative;
}

＆＃13;

<div class="video-player">
  <div class="controls-wrapper">
    <button>play fullscreen</button>
    <br>
  </div>
  <div class="height-checker">
    <canvas id="canvas"></canvas>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
  </div>
</div>

＆＃13;

Answer 1

有一个德国博客解释这个问题和一些解决方案。我尝试重复如何做到这一点：

使视频响应的宽度非常容易。就这样做吧。

HTML：

<div class="embed-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/9T7eSyo7DRU" frameborder="0" allowfullscreen></iframe>
</div>

CSS：

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

为了使高度响应，他使用此代码：

HTML：

    hSession = WinHttpOpen(L"WinHTTP Example/1.0",
        WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
        WINHTTP_NO_PROXY_NAME,
        WINHTTP_NO_PROXY_BYPASS, 0);        
    WINHTTP_PROXY_INFO proxy = { 0 };
    proxy.dwAccessType = WINHTTP_ACCESS_TYPE_NAMED_PROXY;
    proxy.lpszProxy = L"http://127.0.0.1:1234;http://blarg.com:4545";
    if (!WinHttpSetOption(hSession, WINHTTP_OPTION_PROXY, &proxy, sizeof(proxy)))
    {
        wprintf(L"Unable to set proxy.\n");
    }
    else
    {
        HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"GET", NULL, NULL,
            WINHTTP_NO_REFERER, WINHTTP_DEFAULT_ACCEPT_TYPES, WINHTTP_FLAG_SECURE);
        char* username = "username";
        WinHttpSetOption(hRequest, WINHTTP_OPTION_PROXY_USERNAME, username, strlen(username));
        WinHttpSetOption(hRequest, WINHTTP_OPTION_PROXY_PASSWORD, password, strlen(password));

        [ ... ]
    }

CSS：

public static String displayPermissions(Path path)
{
    StringBuilder sb = new StringBuilder();
    sb.append("File "+path + " permissions\n");
    try
    {
        {
            AclFileAttributeView view = Files.getFileAttributeView(path, AclFileAttributeView.class);
            if (view != null)
            {
                for (AclEntry acl : view.getAcl())
                {
                    sb.append(acl+"\n");
                }
            }
        }

        {
            PosixFileAttributeView view = Files.getFileAttributeView(path, PosixFileAttributeView.class);
            if (view != null)
            {
                PosixFileAttributes pfa = view.readAttributes();
                sb.append(":owner:"+pfa.owner().getName()+":group:"+pfa.group().getName()+":"+PosixFilePermissions.toString(pfa.permissions())+"\n");
            }
        }
    }
    catch(IOException ioe)
    {
        logger.severe("Unable to read permissions for:"+path.toString());
    }
    return sb.toString();
}

我希望这能帮到你！你可以找到博文here 也许你有一个很好的翻译程序;）

我知道你不希望它完全响应，但也许它有助于你的项目。

Answer 2

第一点是请求全屏是实验

Mozilla Developer Network Says

这是一项实验技术由于此技术规范尚未稳定，请检查兼容性表以获取在各种浏览器中使用的正确前缀。另请注意，随着规范的更改，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。

Second Point是iframe可以使用allowfullscreen flag定义

Iframe Allow full screen - Mozilla developer network

您可以尝试在请求全屏

之前动态设置allowFullscreen

Answer 3

//首先检查全屏是否可用！

if (
document.fullscreenEnabled || 
document.webkitFullscreenEnabled || 
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
) {}

然后你调用全屏动作

var i = document.getElementById("myimage");

// go full-screen
if (i.requestFullscreen) {
  i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
  i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
  i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
  i.msRequestFullscreen();
}

这是blog post我认为有用的内容！

如何为外部容器设置iframe的全屏？

3 个答案: