前提・実現したいこと
一部のiOS端末でvideoの周りに枠が出てしまうのを消したい。
発生している問題・エラーメッセージ
video再生前は枠線はなくjsでスクロールによって自動再生をさせると枠が発生します。
すべての端末で発生するわけではなく一部の端末でのみ発生します。
該当のソースコード
html
1<video 2 class="autovideo" 3 src="videopath.mp4" 4 poster="imagepath.png" 5 muted 6 playsinline 7 loop 8></video>
js
1function __hoge() { 2 var targetElements = [].slice.call( 3 document.querySelectorAll(".autovideo") 4 ); 5 6 var callback = function (entries, object) { 7 entries.forEach(function (entry) { 8 if (!entry.isIntersecting) return; 9 var target = entry.target; 10 target.play(); 11 object.unobserve(target); 12 }); 13 }; 14 15 var observer = new IntersectionObserver(callback, { 16 threshold: 0.3, 17 }); 18 19 20 targetElements.forEach(function (targetElement) { 21 observer.observe(targetElement); 22 }); 23}
試したこと
下記を設定してみましたが変わりませんでした。
css
1video { 2 filter: drop-shadow(0px 0px rgba(0,0,0,0)); 3 outline: none; 4 border: none; 5}
参照:https://hajimete.org/html-video-frame-border
補足情報(FW/ツールのバージョンなど)
発生環境
iPhone7Plus iOS12.2.3 Safari
あなたの回答
tips
プレビュー