How to create a YouTube video background with CSS
文章推薦指數: 80 %
In this tutorial we will learn how to set a fullscreen Youtube video as a background using CSS and HTML.
fullPage.js
GetfullPage
JavaScript
WordPressTheme
PluginElementor
PluginGutenberg
Extensions
Contact
HowtocreateaYouTubevideobackgroundwithCSS
Jul12,2021
UsinganembeddedYouTubevideoasabackgroundisacommontechniqueinnowadayswebsites.YoucanusetheHTML5videotagtocreateabackgroundvideo.However,thatwouldmeanhostingavideoonlinesomewhere.AndIdon’tknowyou,butinmycase,Ialwaystrytoavoidthatoption.Youtubevideoembedsareagoodalternativetoself-hostedvideos.Theysavebandwidthandtheyloadsuperfast.But,sincetheyareinaniframe,theycanbeabitmoretrickytodealwith.Inthistutorial,we'llbegoingoverhowtocreateaYouTubevideobackgroundforourwebsite.
GettingtheHTMLfortheembeddedYoutubevideo
ThefirstthingwehavetodoisgrabbingtheembedcodeoftheYouTubevideothatwewanttodisplayinthebackground.Justgotoyourchosenvideoandclickonthe“share”button.
Severaloptionswillpopup.Clickonthe“embed”one.
Thiswillopenupanewboxonyourscreenwiththecodeforthevideoyouwanttoembed.Disablethe“Showplayercontrols”intheembedoptionsandthenclickonthe“copy”button.
Nowcreateadivcontainerandpastethereyourembedcode.
UseayoutubevideoasafullscreenbackgroundwithCSS
TheCSSisappliedonthetextdivtomoveitalongwithanyofitscontentsontopofthevideo:
#text{position:absolute;color:#FFFFFF;left:50%;top:50%;transform:translate(-50%,-50%);}
WehaveappliedthesameCSSpropertiesaswedidontheiframetocenterthetext-divinthecenterofourwebpage.You'llwanttomakesurethatthetextwhichisplacedontopofourYouTubevideobackgroundhashighcontrastsothatitcaneasilyberead.
YoucanalsoplaceotherelementssuchashoverbuttonsandusethesameCSSpropertiestoplacethemontopofourYouTubevideobackground.
AddingtheYoutubeembeddedloopoption
Ifyouuseashortvideoyou'llnoticehowtherelatedvideosshowoncethevideoisfinished.Toavoidthiswehavetousealittletrick.Addingtheparameterloop=1tothesourceofthevideoisnolongerenough,wehavetoaddmoreparameterandthisistheplaylistonetowhichwewillassigntheIDoftheyoutubevideo.
So,ifwehavethisvideoweshouldlookforitsid,whichisthecodeafterthe/embed/partorafter?v=whenaccessingthevideothroughtyoutube.Then,wesimplypasteitonourplaylistparam:
&playlist=Yj2iELI6OeI&loop=1
Ourfinalembeddedvideoshoullooklikethis:
延伸文章資訊
- 1An Easy CSS Trick to Make YouTube Less Distracting
YouTube is designed to keep you clicking from video to video, ... Once you've added this CSS code...
- 2How to create a YouTube video background with CSS
In this tutorial we will learn how to set a fullscreen Youtube video as a background using CSS an...
- 3【Day 28】Youtube iframe 影片自動縮放大小- CSS 解決方法
通常使用Youtube 分享功能嵌入的iframe 原始碼,已經提供固定尺寸,若是拿掉寬度與高度又會跑版,這時候就需要修改CSS,來達到影片的RWD(響應式) 效果。
- 4免外掛!4種語法嵌入響應式/循環/自動播放Youtube影片 - 温唯
比如說,調整好在電腦顯示的影片尺寸之後,到了手機一定會超過螢幕範圍,這是因為YouTube預設的嵌入語法,缺少〔響應式〕的CSS樣式,才會造成非常糟糕的 ...
- 5[CSS]響應式網站設計(RWD)如何擺平Youtube 的影片-CSS3 教學
RWD(Responsive Web Design)的設計,其中一個問題就是Youtube, Vimeo 等影片嵌入時,不會隨著網頁寬度自動縮放。雖然RWD 這個我們稱為響應式網站設計 ...