Add a placeholder for the youtube iframe so when it is scrolled away the document height does not change

This fixes an issue with scrolling kind of jumping on devices when
the youtube video is moved to the sticky position.

packages/web/components/templates/article/Article.tsx

@@ -119,12 +119,24 @@ export function Article(props: ArticleProps): JSX.Element {
     const youtubePlayer = document.getElementById('_omnivore_youtube_video')
 
     const updateScroll = () => {
-      console.log('scroll y: ', window.scrollY, youtubePlayer)
+      const YOUTUBE_PLACEHOLDER_ID = 'omnivore-youtube-placeholder'
+      const youtubePlaceholder = document.getElementById(YOUTUBE_PLACEHOLDER_ID)
 
       if (youtubePlayer) {
-        if (window.scrollY > 200) {
+        if (window.scrollY > 400) {
+          if (!youtubePlaceholder) {
+            var rect = youtubePlayer.getBoundingClientRect()
+            var placeholder = document.createElement('div')
+            placeholder.setAttribute('id', YOUTUBE_PLACEHOLDER_ID)
+            placeholder.style.width = rect.width + 'px'
+            placeholder.style.height = rect.height + 'px'
+            youtubePlayer.parentNode?.insertBefore(placeholder, youtubePlayer)
+          }
           youtubePlayer.classList.add('is-sticky')
         } else {
+          if (youtubePlaceholder) {
+            youtubePlayer.parentNode?.removeChild(youtubePlaceholder)
+          }
           youtubePlayer.classList.remove('is-sticky')
         }
       }

packages/web/styles/articleInnerStyling.css

@@ -664,4 +664,10 @@
       -webkit-transform: none;
       transform: none;
   }
-}
+}
+
+.youtubeplaceholder {
+  border: 2px dashed #aaa;
+  box-sizing: border-box;
+}
+