Add on top of YouTube embed player, or on video tag?

[bolinocroustibat]

Is it possible to use YouTube iframe embed video, or HTML5 <video> tag as texture? I tried with no success until now, maybe I'm missing something... Thanks!

[halvves]

Hey @bolinocroustibat. Unfortunately, there isn't currently a way to get the pixels of an iframe, let alone use them in a webgl texture (part of iframe/web security). You should, however, be able to use regular video files as textures.

<shader-doodle>
  <sd-texture src="video.mp4" name="video"></sd-texture>
  <script type="x-shader/x-fragment">
    uniform sampler2D video;

    void main() {
      vec2 uv = gl_FragCoord.xy / u_resolution.xy;
      vec4 texture = texture2D(video, uv);

      gl_FragColor = texture;
    }
  </script>
</shader-doodle>

Here is an example using <video> tags like you were asking for: https://github.com/halvves/shader-doodle/blob/master/demo/video-element.html

[bolinocroustibat]

Hi @halvves and thank you very much for your precise answer.

Yeah I was a bit afraid of that, and I saw shader-doodle had a way to work with video files - which is great. By the way, I really like this project. Unfortunately my use cases now are with YouTube embeds so I can't use it for those present uses cases 😢

However, in the meantime I did a few simple hacks, code removals on shader-doodle VHS effect in order to apply overlay textures shaders only: no cam/video shaders anymore, only texture ones applied on the top of the YouTube iframe/video tag. It's not as wonderful as the original shader-doodle VHS effect as it doesn't distort the video itself anymore, but still visually works quite ok as a VHS effect.

[halvves]

@bolinocroustibat even though using a youtube embed as a texture is currently an impossibility, is there anything shader-doodle could to to make it more useful for just overlaying effects on an iframe/youtube embed?

[bolinocroustibat]

@halvves can't think about anything for now, but I wonder if we could integrate a non-full opacity CSS (canvas?) overlay on top of an embed video/iframe to be "shaderized". It's a bit what I did, but maybe it could be an integrated (and better) shader-doodle method so that we would only pass the iframe/video tag. Just a very broad general idea.