I am looking to incorporate an image into a particular section of the html code once the screen size is adjusted to mobile view using a media query

How can I use media queries to add an image as a background to the section with the id= "vid" while hiding the background video that is currently playing on it? Here is my current HTML code:

<section id="vid" class="vidd">
<video  playsinline autoplay muted loop poster="css\img_forest1.jpg" id="bgvd">
<source src="video\Love-Coding.webm" type="video/webm">
</video>
</section>

And here is my CSS code:

@media screen and (max-width: 480px)
{
video { display: none; }
}

@media screen and (max-width: 480px)
{
    #vid { 
        background: url(img_forest.jpg) no-repeat center center scroll;
}
}

Answer №1

Add your custom background image to the <section> element separately.

HTML

<section id="vid" class="vidd">
  <img src="assets\img_forest1.jpg" class="custom-image"/>
  <video playsinline autoplay muted loop poster="assets\img_forest1.jpg" id="custom-bg-video">
    <source src="video\Love-Coding.webm" type="video/webm">
  </video>
</section> 

CSS

.custom-image { display: none; }
@media screen and (max-width: 480px)
{
 video { display: none; }
.custom-image { display: block; }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble getting my HTML <button> element to function correctly

I'm currently working on a project where I need to animate a green bar moving upward over a blue bar when a button is clicked. However, no matter what I try, the button doesn't seem to be working. I've experimented with using both the button ...

When viewed through the Firefox browser on an Android device, the text on the webpage suddenly enlarg

I currently have the following content displayed on my website: <div style="font-size: 11px; line-height: 17px; text-align: left;"> <p>lorem ipsum etc etc</p> </div> Strangely, despite setting the font size to 11px, the te ...

Navigating through the realm of Android development entails understanding how to manage a multi-object function in JavaScript when using

In order to load an HTML page using the webview component and handle its functions, I am faced with a challenge. The HTML page contains a multi-object named (webkit.messageHandlers.adClicked). How can I utilize the webView.addJavascriptInterface() functi ...

Selecting radio buttons across multiple div classes

I've been struggling to programmatically select specific radio buttons on a webpage. My goal is to automatically choose the second option in each group of radio buttons, but I'm getting lost in the syntax. Unlike most examples I've found on ...

Selenium web scraping falls short in fully extracting all the data needed

Struggling to extract bond information from a webpage using Selenium. Despite successfully retrieving data for some rows in the table, certain rows and columns remain unscraped. The reason behind this inconsistency is unclear. The target webpage can be fo ...

Can the outcome of a MySQL query be showcased in PHP without the need for looping?

Can I display the result of a MySQL query using an array index counter? I have a code that generates two tables for input numbers ranging from 6 to 11, dividing them equally if possible. It also generates team names incrementally (e.g., team 1, team2, ... ...

Is there a way to eliminate the surplus 2 download icons from this Angular code when there are a total of 3 users?

Here is some HTML code snippet: <tr *ngFor="let user of users"> <td> <h6 class="font-medium">{{user.id}}</h6> </td> <td> <h ...

The Material UI ToolTip displays inaccurately when placed within a container that has overflow scroll enabled

Within my ReactJS application, I have implemented a list of Material UI ToolTips with IconButtons nested inside a div element featuring overflow: scroll. One specific row displays the Material UI ToolTip in the following manner: <ClickAwayListener onCl ...

The innerHTML of the p tag remains unaffected when using document.getElementsById("")

HTML {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'lessons/style.css' %}" /> <script> function openNav() { document.getElementById("mySidenav").style.width = "20%"; document.getElementById("main" ...

Enhancing the efficiency of a JavaScript smooth scrolling feature for numerous listed items

I have been experimenting with recreating the recent Apple Mac retrospective using only CSS and JavaScript to create a small timeline of projects. While I have successfully implemented the layout for the full-screen hero and the expand-on-hover effect, I a ...

Practical steps for programmatically adding or removing md-disable-backdrop in md-sidenav

Can the md-disable-backdrop attribute be removed from HTML? The issue arises when opening the side navigation as the md-sidenav does not have the md-disable-backdrop attribute. After making a selection from the form displayed in the side navigation, I now ...

problem with z-index and background image overlap

I'm attempting to overlay a .header-content div, containing the website content, on top of another .header-bg div, which has only a background cover and a set height using z-index. When I change the .header-bg to position:absolute, the background ima ...

Applying a CSS class to a newly generated row with JavaScript

I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...

Arrange a div element among the descendants of a neighboring div

I am working with a div that is generated by a library. This div contains 2 child divs with varying heights, which can change based on the API response and the width of the browser window. My goal is to display another div (my-div) between top-bar and bot ...

Angular renders HTML elements

Greetings! I am currently experimenting with using AngularJS for the frontend and Wordpress as the backend of my project. To load content from Wordpress into Angular, I am utilizing a JSON wordpress plugin along with making $http requests. The content th ...

When you hover over it, the text moves above the background content

I am looking to enhance my table by having the text expand and hover over the content with a white background. I have achieved the expand effect, but I am struggling to get the overflow to work properly. You can view the code in action on JsFiddle: JsFiddl ...

Having trouble with playing the appended HTML5 Video?

Having trouble getting a video player to display after clicking a button. This is the code I use to add the video player in index.html: $("#videoContainer").append( "<video id=\"video-player\" width=\"100%\" height ...

Enhance your Bootstrap navigation menu with eye-catching hover effects

Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH I've tried to replicate t ...

Tips for enabling multiple v-list-group components to remain open simultaneously (bypassing the default Vue behavior)

Currently, I am facing an issue with Vue's default behavior where only one v-list-group can be open at a time. I am using Vuetify 2.6 and have attempted to use the multiple prop without success. Additionally, individually assigning the :value prop to ...

Resizing Wordpress images to uniform height within a Bootstrap flex-row with flex-nowrap styling

I have successfully integrated Bootstrap with a Wordpress Underscores Template. My goal is to create a horizontally scrollable container filled with images of equal height. Currently, I am facing an issue where the images within the scrollable container ...