An Easy CSS Trick to Make YouTube Less Distracting
文章推薦指數: 80 %
YouTube is designed to keep you clicking from video to video, ... Once you've added this CSS code, your YouTube homepage should look like this:. AnEasyCSSTricktoMakeYouTubeLessDistracting Myworkisreader-supported;ifyoubuythroughmylinks,Imayearnanaffiliatecommission. YouTubeisdesignedtokeepyouclickingfromvideotovideo,lengtheningyouroverallsessiontime.Youcanseeevidenceofthisgoalinthedesignofeverypage;fromthehomepagetoasinglevideo’spage,you’rebombardedwithlotsofsuggestedvideos. Here’stheproblem:Thesesuggestedvideosoftenencourageyoutogivelessthanyourfullattentiontothevideoyou’realreadywatching!I’vecertainlynoticedmyselfclickingvideos,watchingafewsecondsoraminute,andthenhavingmyeyecaughtbysomethingelseinthesidebar. Ifyouwanttofixthisproblem,here’sasolution.Well,actuallytherealsolutionistowatchvideosinfull-screenmode,whichIencourage.Buthere’sasecondarysolutionthatusesCSS. First,installtheStylebotextensioninChrome(orStylusifyou’reusingFirefox,orsomeotherCSSpluginifyou’reusinganotherbrowser). Then,onanyYouTubepage,openStylebotandclickthebottomatthebottomlabeledEditCSS.Pasteinthiscode: .ytd-grid-renderer,yt-horizontal-list-renderer,ytd-expanded-shelf-contents-renderer,ytd-watch-next-secondary-results-renderer{ -webkit-filter:blur(5px)grayscale(1); /*Safari6.0-9.0*/ filter:blur(5px)grayscale(1); } Codelanguage:CSS(css) Onceyou’veaddedthisCSScode,yourYouTubehomepageshouldlooklikethis: …andasinglevideo’spagewilllooklikethis: Ifyouneedtoseewhat’sonthehomepageorinasidebar,youcanopentheStylebotmenuandhoverovertheRemoveStylingoption.Ifyouclickit,though,yourcodewillbeerasedandyou’llhavetocomebackheretograbitagain. I’llleaveitasanexercisetothereadertoaddhoverstatestothiscodeiftheysochoose. Andyes,IrealizethatsharingthiscodeisactivelyagainstmyowninterestsasaYouTuberwhoshouldbeseekingtomaximizethesessiontimeofmyviewers.I’mokwiththat;I’dratherhelpbuildaninternetthatdoesn’tactivelycontributetothedestructionofourabilitytoconcentrateonsingularthingsforlongperiodsoftime–askillIbelieveisessentialforlearningdeeplyanddoinggoodwork. Subscribetomynewsletter Email Subscribe Subscribetogetmy TuesdayToolsandTips newsletter.Unsubscribeeasilyatanytime. ©ThomasFrank2022 ClicktoCopy 🤔HaveanUBQuestion? FillouttheformbelowandI’llanswerassoonasIcan!~Thomas Name Email Message Send 🤔HaveaQuestion? FillouttheformbelowandI’llanswerassoonasIcan!~Thomas Name Email Message Send
延伸文章資訊
- 1HTML YouTube Videos - W3Schools
Well organized and easy to understand Web building tutorials with lots of examples of how to use ...
- 2Build A YouTube Clone Using HTML, CSS and JS 100 ...
Best Practice: Master your Front-End Web Developer Skills By Building A YouTube Clone Using HTML,...
- 3How 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...
- 4[CSS]響應式網站設計(RWD)如何擺平Youtube 的影片-CSS3 教學
RWD(Responsive Web Design)的設計,其中一個問題就是Youtube, Vimeo 等影片嵌入時,不會隨著網頁寬度自動縮放。雖然RWD 這個我們稱為響應式網站設計 ...
- 5免外掛!4種語法嵌入響應式/循環/自動播放Youtube影片 - 温唯
比如說,調整好在電腦顯示的影片尺寸之後,到了手機一定會超過螢幕範圍,這是因為YouTube預設的嵌入語法,缺少〔響應式〕的CSS樣式,才會造成非常糟糕的 ...