-
SCSS-videoPlayerProject using node.js/Cloning Youtube 2020. 9. 3. 10:38
partials/videoPlayer.scss
.videopPlayer { margin-bottom: 20px; display: flex; position: relative; video { align-self: center; width: 100%; max-width: 100%; } &:hover, &:active { .videoPlyaer__controls, .progressBar { opacity: 1; } } .videoPlyaer__controls { opacity: 0; transition: opacity 0.4s linear; display: flex; justify-content: space-between; position: absolute; bottom: 0px; color: white; font-size: 16px; padding: 10px 15px; background-color: rgba(0, 0, 0, 0.5); width: 100%; #jsVolumeBtn { margin: 0 15px; } #jsVolumeRange { bottom: 65px; left: 7px; width: 80px; z-index: 2; } span { .slash { padding: 0 3px; } } i { width: 20px; cursor: pointer; } } .progressBar { position: absolute; z-index: 2; width: 100%; bottom: 0; opacity: 0; transition: opacity 0.4s linear; .progress { position: relative; bottom: 35px; display: flex; height: 15px; background: rgba(59, 59, 59, 0.5); cursor: pointer; } .progress__filled { background: $red; transition: flex-basis 0.25s linear; } } }
View
참고 자료
소스 코드
https://github.com/zpskek/wetube-v3/commit/759d8cae9149d46191ac4dfb458ac55c4e10e5a0
'Project using node.js > Cloning Youtube' 카테고리의 다른 글
JavaScript video volume button (0) 2020.09.03 JavaScript video play button (0) 2020.09.03 SCSS-search (0) 2020.09.02 SCSS-videoDetail (0) 2020.09.02 SCSS-userDetail (0) 2020.09.02