嵌入youtube視頻在iPhone上滾動問題

當我將youtube視頻嵌入到我的移動頁面中時，它會在iPhone中帶來很多滾動問題（我想它也會在其他設備中出現相同的問題）。當用戶點擊視頻本身時用戶無法滾動頁面。下面是代碼我用於嵌入嵌入youtube視頻在iPhone上滾動問題

<iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0"></iframe>

我們反正可以解決這個問題？例如，我們可以只顯示視頻的縮略圖，並在用戶點擊該圖像時播放它。我認爲滾動問題會在頁面中存在圖片而不是iframe時消失。

我試過使用html5版本的youtube視頻，但似乎iPhone仍然以flash方式呈現視頻。

<iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0&html5=True"></iframe>

來源

2013-05-16 Chuck Norris

我在我的網站上遇到了完全相同的問題，這不是谷歌博客中的情況。我確切地說它不會滾動iframe內容，它會滾動safari的視口。

我試圖通過一個img，沒有滾動問題，但現在的視頻在YouTube應用開來代替IFRAME ...

我感興趣的一個解決方案/解決方法

圖像解決方案

var frame = $('#youtubeFrame'); 
if (mobileCheck) 
{ 
    frame.replaceWith('<a href="http://www.youtube.com/watch?v='+youtubes[currentVideo]+'"><img id="imgYoutubeFrame"/></a>'); 
    $.getJSON("http://gdata.youtube.com/feeds/api/videos/"+youtubes[currentVideo]+"?v=2&alt=jsonc&callback=?", function(json){ 
     $("#imgYoutubeFrame").attr("src", json.data.thumbnail.hqDefault); 
    }); 
}

來源

2013-05-21 14:26:35 paradiz

您能否提供有關您的解決方案的更多信息？（隨着圖像變化）...開放與youtube應用程序對我來說是好的:) –

IMG更換解決方案後更新 – paradiz

我已經測試過它...我認爲它會重新導向到Safari後視頻被關閉，但不幸的是沒有:(謝謝 –

-1

據我知道你不能有滾動在iOS設備上的iFrame
由於滾動與觸摸/滑動/姿勢
它會滾動整個頁面...即做：如果你嘗試滾動
iFrame中的內容將滾動整個頁面...所以iFrame
將隨之移開。

所以，你可以看起來更在您不使用滾動幀的方向，
或使舒爾世界上沒有必要滾動（內容爲框架的尺寸是中），
或使用的fancybox型的或者有2（jquery）按鈕，當按下按鈕進行上/下滾動（而不是滾動條），
或有一個鏈接打開播放器在一個框架，
或新頁面，
或視頻在iOS播放器本身直接打開的標準方式（QT/Safari）。

來源

2013-05-16 17:26:45 dutchguy

我們在我們的移動網站上也有Vimeo問題。我們花了一段時間才發現用戶遇到了這個問題。我們正在檢查的一項工作是在視頻頂部添加一個div層，該層允許用戶正常滾動，並且還充當自定義播放按鈕，可以區分滾動和水龍頭，或者可能需要雙擊點擊播放視頻。在這裏如何做到這一點的總體原則（https://css-tricks.com/play-button-youtube-and-vimeo-api/）有很好的一步一步的信息。我很想聽聽別人是否找到了解決這個問題的更好方法。

來源

2016-02-22 20:04:37

下面的代碼片段似乎可以做伎倆，而不需要任何JavaScript欺騙。同時這也確保你在iOS上獲得不錯的滾動動力。

*{ 
    -webkit-overflow-scrolling: touch; 
}

來源

2017-09-25 21:35:00 user2019515

完美的工作！ – user2576878

嵌入youtube視頻在iPhone上滾動問題

回答

相關問題