⚠️ IE11에서 비디오 요소에 초점을 맞추면 동영상이 사라지고 보이지 않습니다.
TL;DR
video 요소에 초점을 맞추면 동영상이 보이지 않습니다.outline 속성 때문에 outline 속성 이외의 포커스 링을 표현하기 위해서 주제
샘플 HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>動画にフォーカスを当てると表示されなくなる</title>
<style>
video {
margin: 40px auto;
display: block;
max-width: 640px;
height: auto;
}
</style>
</head>
<body>
<video src="path/to/movie.mp4" controls></video>
</body>
</html>
성공적으로 재생할 수 있는
video 요소가 있습니다. 이것에 초점을 맞추면 ...
이렇게 동영상이 새하얗게 됩니다. 재생이 중지되었거나 시작된 경우에도 마찬가지입니다.
해결책
video {
&:focus {
outline: 0;
border: 2px solid #000; // なんでもいい
}
}
원인은
outline 프로퍼티가 맞고 있는 것에 있는 것 같습니다.
border 이나 box-shadow 등의 대체 수단으로 포커스 링을 표현해 해결합니다.마지막으로
이제 IE11 관련 기사를 쓰는 것도 좀처럼 누가 느낌이 있습니다만, 조금 조사한 결과 이 건을 언급하고 있는 기사를 찾을 수 없었기 때문에 메모 정도에. . .
동영상은 「HYBRID CREATIVE MOVIE 사쿠라」님으로부터 빌렸습니다.
htps //w w. 호메도 ゔ아. 비·f레에_도ごぃ에. HTML
Reference
이 문제에 관하여(⚠️ IE11에서 비디오 요소에 초점을 맞추면 동영상이 사라지고 보이지 않습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/heppokofrontend/items/6c8bf79758969bad9096텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
