mobile responsive webpage is not appealing at all

Hi there,

to add different videos for different devices you need to:

1. Edit your video HTML to include the hide-on-mobile class.
So this line:

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">

becomes:

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video hide-on-mobile">

2. then duplicate the video HTML block
2.1 change the HTML classes of the duplicate to include hide-on-desktop hide-on-tablet ie.

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video hide-on-desktop hide-on-tablet">

2.2 and update the videos URL for your mobile version

1. This article should be insightful regarding this: https://docs.generatepress.com/article/adding-a-background-video/

Can you try this structure, implementing David’s suggestion as well?

2. It’s possible but this will need custom Javascript. This will likely affect your site’s performance though.

To do this, you can give an anchor ID to your Container Block holding the text. Give it an ID of video-container.

Then, with a video with class background-video, the JS would be something like this most likely:

<script>
const video = document.getElementById('background-video');
const videoContainer = document.getElementById('video-container');

video.addEventListener('loadeddata', function() {
  videoContainer.style.display = 'block'; // Display the video container once the video loads
});
</script>

This JS can be added through a Hook Element hooked to wp_footer.

Ideally, what this code does is check if the video is loaded, and then set the display of the Container.

You’ll need to add a CSS like this as well:

#video-container {
  display: none; /* Initially hide the video container for the text */
}

But again, to reiterate, adding JS for this can be detrimental to your performance – by how much? – that depends on how fast your site loads the script.

If you use the GB Headline Block to add your text.
Then whilst in the editor, you can switch to Tablet or Mobile previews and update its Typography styles for that screen size