Thank you very much for your detailed response earlier.
I appreciate you letting me know that this needs to be done in English.
However, as a beginner, I don’t even know how to fix it, so I will delete it once the issue is resolved…
Now, getting to the main point, since I’m using the WIX Editor, I managed to use a Lightbox to successfully fade out the video!
However, there’s still an issue.
When the video fades out, the entire site appears in a faint white color, making it difficult to see.
I suspect the issue is that the Lightbox isn’t closing properly.
I’ll attach the current code I’m working on, so could you please advise how to fix it?"
Let me know if you need further refinements or assistance!
$w(“#videoPlayer1”).onEnded((event) => {
let targetId = event.target.id; // “videoPlayer1”
});
$w(“#videoPlayer1”).onEnded(() => {
$w(“#lightbox1”).hide(“fade”).then(() => {
$w(“#lightbox1”).collapse();
});
});
Hi, user4088 !!
The method of implementation will likely vary depending on whether you are using the Wix Editor or the Wix Studio Editor. In Wix Studio, 
it may be easier to make a video element fullscreen, so a lightbox might not be necessary. However, if you’re using the Wix Editor, you might need to place the video element inside a lightbox. In any case, you would need to detect when the video playback ends and fade out the video element as follows. For more detailed information, please refer to the links below. 
$w("#myVideoPlayer").onEnded(() => {
$w("#myVideoPlayer").hide("fade").then(() => {
$w("#myVideoPlayer").collapse();
});
});
https://dev.wix.com/docs/velo/api-reference/$w/video-player/on-ended
1 Like
I am also Japanese, so I accidentally replied without realizing it, 
but this forum has a rule that all communication must be conducted in English. If you post in a language other than English, you might get reprimanded, so please edit your post and rewrite it in English. I use it as well, but tools like ChatGPT can translate into natural English for you, so they are very convenient. 
Thank you very much for your detailed response earlier.
I appreciate you letting me know that this needs to be done in English.
However, as a beginner, I don’t even know how to fix it, so I will delete it once the issue is resolved…
Now, getting to the main point, since I’m using the WIX Editor, I managed to use a Lightbox to successfully fade out the video!
However, there’s still an issue.
When the video fades out, the entire site appears in a faint white color, making it difficult to see.
I suspect the issue is that the Lightbox isn’t closing properly.
I’ll attach the current code I’m working on, so could you please advise how to fix it?
$w(“#videoPlayer1”).onEnded((event) => {
let targetId = event.target.id; // “videoPlayer1”
});
$w(“#videoPlayer1”).onEnded(() => {
$w(“#lightbox1”).hide(“fade”).then(() => {
$w(“#lightbox1”).collapse();
});
});
That’s right. I was debating whether to add it to the code I wrote earlier, but if you are implementing it using a lightbox, you will need to add a process at the end to close the lightbox itself.
Probably, if you are implementing this with a lightbox, there’s no need to use .collapse(), so you can remove that from the code. If you want to customize the fade-out details, feel free to add fadeOptions and adjust as you like. Also, achieving true fullscreen video might be challenging in the Wix Editor, so you may need to find a workaround for that. That said, if it doesn’t have to be a true fullscreen display, the current setup should work just fine.
// In light box
import wixWindowFrontend from "wix-window-frontend";
$w("#myVideoPlayer").onEnded(() => {
$w("#myVideoPlayer").hide("fade").then(() => {
wixWindowFrontend.lightbox.close();
});
});
https://dev.wix.com/docs/velo/api-reference/$w/video-player/hide
https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/lightbox/close
1 Like
Apologies for the delayed response.
I successfully managed to fade out the lightbox using the code you provided—thank you so much!
I’m sorry for asking another question in succession, but I managed to position a horizontal video on the PC version.
Could you advise on how to display a vertical video on the smartphone version?
I hate to trouble you again, but I’d greatly appreciate your guidance when you have a moment.
Thank you in advance!
Hi, nina !!
It’s been a while!
Hmm, personally, I haven’t tried that yet, 
so I think some testing and experimentation would be necessary. For now, if you want to optimize playback for vertical videos, you’ll likely need a separate vertical video. The idea would be to detect the device the user is browsing with and switch the video linked to the video element accordingly. Please try implementing it that way for now. I can’t say for sure if it will work. If that doesn’t work, then using an HTML Component (iframe) or custom element for implementation would probably be the next step.
import wixWindowFrontend from "wix-window-frontend";
$w.onReady(() => {
const actions = {
Desktop: () => {
// Desktop-specific code here
$w("#videoPlayer1").src = "horizontal-video-url";
},
Tablet: () => {
// Tablet-specific code here
$w("#videoPlayer1").src = "vertical-video(tablet)-url";
},
Mobile: () => {
// Mobile-specific code here
$w("#videoPlayer1").src = "vertical-video(mobile)-url";
},
};
const formFactor = wixWindowFrontend.formFactor; // "Desktop" or "Tablet" or "Mobile"
if (actions[formFactor]) {
actions[formFactor]();
}
});
1 Like
Long time no see. During this time, I tried my best, but things didn’t go well, and I started to think I might be approaching it wrong, so I decided to reach out to you again. Is it correct to paste this long code after the code you implemented last time for fading out the lightbox? Also, when switching to vertical videos for tablets or mobile versions, should I replace #videoPlayer1 with something like videoPlayer2 for vertical videos? I’m sorry for bombarding you with so many questions as a beginner.
Hmm, it’s been a while, and my memory is a bit hazy. Plus, I’ve never dealt with vertical videos before, so I can’t say for certain. That said, if you want to play vertical videos, I think you’ll need to create videos with an aspect ratio like 9:16.
So, if you’re implementing this in the Wix Editor, you should first prepare three videos:
- One optimized for desktop (landscape orientation),
- One optimized for tablets (portrait orientation),
- One optimized for mobile (portrait orientation).
Now, regarding the question of whether you need three separate #videoPlayer elements for each video: I don’t think that’s necessary. It wouldn’t hurt to have separate players, but instead, you could adjust the aspect ratio of a single #videoPlayer element for each breakpoint (desktop, tablet, mobile). So, I think one video player element is sufficient.
That said, I’ve never implemented this type of feature before, so I can’t guarantee it’ll work, but you could try approaching it with the following code. If it doesn’t work, feel free to reach out again!
// In light box
import wixWindowFrontend from "wix-window-frontend";
$w.onReady(() => {
const videoUrls = {
Desktop: "horizontal-video-url",
Tablet: "vertical-video(tablet)-url",
Mobile: "vertical-video(mobile)-url",
};
const formFactor = wixWindowFrontend.formFactor; // "Desktop", "Tablet", or "Mobile"
const videoUrl = videoUrls[formFactor];
if (videoUrl) {
$w("#videoPlayer1").src = videoUrl;
$w("#videoPlayer1").play();
}
$w("#videoPlayer1").onEnded(() => {
$w("#videoPlayer1").hide("fade").then(() => {
wixWindowFrontend.lightbox.close();
});
});
});
In this case, does it mean that there’s no need to add a video element in the WIX editor, and that it might be possible to handle it by preparing a video URL suitable for each device? Regarding the video URL, for example, ‘Desktop: “horizontal-video-url”,’ does it mean I should paste the URL into the ‘horizontal-video-url’ section?
Yes.
I haven’t tested this code myself since I’m short on time, so I’m not sure if it will work perfectly. However, give it a try first. By trying it, you’ll be able to identify any issues. You only need to set up one video player element. In each breakpoint editor, adjust it to the optimal aspect ratio. This means setting it to a vertical layout in the tablet and mobile editors.
Also, as you mentioned, you’ll need to replace the URLs in the code with your video URLs. I assume you’ve uploaded the videos to Wix. If so, you should be able to right-click on the videos to find an option to obtain their URLs. Copy those URLs and paste them into the code.
One More Time-sama, you are like a god to me. Thank you so much for your kind and thorough guidance until the very end. I was able to confirm that the implementation works successfully! Lastly, I have a final question: when playing the video within the lightbox on the smartphone version, the play button and rewind button…
What happened with the buttons ?
One More Time-sama, you are like a god to me. Thank you so much for your kind and thorough guidance until the very end. I was able to confirm that the implementation works successfully! Lastly, when playing a video within the lightbox on the smartphone version, the play button, rewind button, fast-forward button, and mute button appear. Is it impossible to remove these because the video is placed using an MP4 URL?
I haven’t tried it myself, so I’m not entirely sure, but using a video box element instead of a video player element might solve the issue. Video box elements also have a “play button,” but I believe there’s a menu to edit the design of the play button. You can try making the play button completely transparent there. This way, it might not feel like you’re playing a video with a player but rather showcasing the video as part of the design.