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 ...
- 2HTML and CSS Project – How to Build A YouTube Clone Step ...
Our code doesn't look too beautiful after running. Well, we'll fix that with CSS. So let's add CS...
- 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...
- 4Build 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,...
- 5【Day 28】Youtube iframe 影片自動縮放大小- CSS 解決方法
通常使用Youtube 分享功能嵌入的iframe 原始碼,已經提供固定尺寸,若是拿掉寬度與高度又會跑版,這時候就需要修改CSS,來達到影片的RWD(響應式) 效果。