# Sky Effects Video

**URL:** <https://forum.8thwall.com/t/sky-effects-video/3423>\
**Category:** Technical Support\
**Created:** [November 3, 2024, 6:00am UTC](https://forum.8thwall.com/t/sky-effects-video/3423 "2024-11-03T06:00:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lakshan\_Kuruppu](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Lakshan\_Kuruppu](https://forum.8thwall.com/u/Lakshan_Kuruppu)\
**Post date:** [November 3, 2024, 6:00am UTC](https://forum.8thwall.com/t/sky-effects-video/3423/1 "2024-11-03T06:00:36Z")

</div>

Hey,

Can I put a video on sky ? That shows it only on the sky. Can I have a code or something if its possible ?

Thank you,

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [November 4, 2024, 3:05pm UTC](https://forum.8thwall.com/t/sky-effects-video/3423/2 "2024-11-04T15:05:05Z")

</div>

Absolutely - this will look very similar to our sample project, which uses `<a-sky>` with a texture to make a galaxy effect in the sky:

```auto
<a-entity xrlayerscene="name: sky; edgeSmoothness:0.6">
  <a-sky material="src: #skyTexture; transparent: true; opacity: 1; fog: false;"></a-sky>
</a-entity>

```

> **[A-Frame: Sky Effects | 8th Wall | 8th Wall](https://www.8thwall.com/8thwall/sky-effects-aframe/code/body.html#L46)**
>
> This Sky Effects sample project demonstrates Sky Effects in A-Frame.

You should be able to use a video texture instead of an image texture, or perhaps use [`<a-videosphere>`](https://aframe.io/docs/1.6.0/primitives/a-videosphere.html) instead of a `<a-sky>`.

Make sure the `<video>` is `muted` - you might also need to manually call `play()` on the video from a custom component.

---

<div class="post-metadata">

**Author:** ![Lakshan\_Kuruppu](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Lakshan\_Kuruppu](https://forum.8thwall.com/u/Lakshan_Kuruppu)\
**Post date:** [November 5, 2024, 4:14am UTC](https://forum.8thwall.com/t/sky-effects-video/3423/3 "2024-11-05T04:14:37Z")

</div>

Thank you for the reply.  
Actually I want to do something like this. But video not playing over the sky texture. Would you able to check what is the issue? Its good if I can play the video with sound.

```auto
<div id="orientationOverlay">
  <div id="message">
    <img src="./assets/rotate.svg" width="100px" />
    Please rotate the phone to portrait mode for a better experience.
  </div>
</div>

<a-scene
  xrextras-loading
  xrextras-runtime-error
  landing-page
  sky-coaching-overlay
  sky-recenter
  renderer="colorManagement: true"
  xrlayers
  device-orientation>
  <a-assets>
    <img id="skyTexture" src="./assets/space.png" />
    <video
      id="video"
      src="assets/test.mp4#t=0.001"
      autoplay
      loop
      muted
      playsinline
      crossorigin="anonymous"></video>
  </a-assets>

  <a-camera wasd-controls-enabled="false" position="0 3 0" raycaster="objects: .cantap"></a-camera>

  <!-- Sky texture -->
  <a-entity id="skyScene" xrlayerscene="name:sky; invertLayerMask:false; edgeSmoothness:0.6">
    <a-videosphere material="src: #skyTexture; transparent: true; opacity: 1; fog: false;">
    </a-videosphere>

    <!-- Overlay video plane -->
    <a-plane
      material="shader: flat; src: #video; transparent: true; opacity: 1;"
      position="0 10 -10"
      width="6"
      height="3.375"></a-plane>

    <a-entity light="type: ambient; intensity: 1;"></a-entity>
  </a-entity>
</a-scene>

```

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [November 5, 2024, 1:51pm UTC](https://forum.8thwall.com/t/sky-effects-video/3423/4 "2024-11-05T13:51:00Z")

</div>

If you want to play a video with sound, you will need to capture a user gesture to start the video. You could add a button in the experience that calls `play()` on the video, have the user tap the sky to start the video, etc.

See this sample project:

> **[Splash screen + video with sound | 8th Wall Playground | 8th Wall](https://www.8thwall.com/playground/video-with-sound)**
>
> This project illustrates how to play a video with sound by registering a user interaction via a button on a splash screen.