diff --git a/app/assets/javascripts/discourse/app/initializers/post-decorations.js b/app/assets/javascripts/discourse/app/initializers/post-decorations.js index ce297d71484..98fa982cc4f 100644 --- a/app/assets/javascripts/discourse/app/initializers/post-decorations.js +++ b/app/assets/javascripts/discourse/app/initializers/post-decorations.js @@ -56,14 +56,20 @@ export default { if (caps.isSafari || caps.isIOS) { api.decorateCookedElement( elem => { - const video = elem.querySelector("video"); - if (video && !video.poster) { + elem.querySelectorAll("video").forEach(video => { + if (video.poster && video.poster !== "" && !video.autoplay) + return; + const source = video.querySelector("source"); if (source) { - // this tricks Safari into loading the video preview + // In post-cooked.js, we create the video element in a detached DOM + // then adopt it into to the real DOM. + // This confuses safari, and preloading/autoplay do not happen. + + // Calling `.load()` tricks Safari into loading the video element correctly source.parentElement.load(); } - } + }); }, { id: "safari-video-poster", afterAdopt: true, onlyStream: true } );