我如何設置全屏iframe與外部容器？

當我執行此代碼時：它確實爲此<div class="video-player">輸入了全屏，但帶有youtube的iframe不會調整大小。我能做些什麼來解決它？

我使用的YouTube API和我的代碼如下所示：

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)(); 
 
    } 
 
}

.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; 
 
}

<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>

來源

2016-01-29 Vardius

第一點是要求全屏幕是實驗

Mozilla Developer Network Says

這是一個實驗性的技術因爲這項技術的規範還沒有穩定下來，檢查兼容性表正確的前綴中使用各種瀏覽器。另請注意，隨着規範的變化，實驗技術的語法和行爲在未來版本的瀏覽器中可能會發生變化。

第二點是一個iframe可以同時將allowFullScreen標誌被定義

Iframe Allow full screen - Mozilla developer network

你可以試試您的要求爲全屏顯示

來源

2016-01-29 10:32:36

有一個德國的博客至極解釋這個問題和一些解決方案。我試圖重複如何做到這一點：

爲了使視頻響應的寬度很容易。只需在CSS上做。

的HTML：

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

的CSS：

img, 
iframe { 
    max-width: 100%; 
}

爲了使高度敏感，他使用此代碼：

的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%; 
}

我希望這對你有幫助！你可以找到這個博客文章here 也許你有一個很好的翻譯程序;）

我知道你不希望它完全響應，但也許它有助於使你的項目。

來源

2016-01-29 10:30:01 vale42

//首先檢查全屏幕前，動態設置的allowFullScreen可用或不可用！

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我想讀有用！

來源

2016-01-29 11:38:30

我如何設置全屏iframe與外部容器？

回答

相關問題