CSS可以通過設(shè)置全屏樣式從而讓視頻自動變成全屏的效果,本文將為您介紹具體的實現(xiàn)方法。
video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } video::-webkit-media-controls { display: none !important; } video::-webkit-media-controls-enclosure { display: none !important; } video::-webkit-media-controls-overlay-cast-button { display: none !important; }
以上代碼是通過設(shè)置video元素的寬和高為100%實現(xiàn)視頻自動變成全屏的效果。同時還需要隱藏瀏覽器自帶的控制欄,可以使用webkit的css樣式。
在使用上述代碼時需要注意,如果視頻是以iframe嵌入到頁面中,那么需要在iframe上設(shè)置allowfullscreen屬性。
<iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
這樣,你就可以輕松的實現(xiàn)視頻全屏的效果了。