Forums

Give help. Get help.

  • # September 26, 2018 at 4:48 pm

    I’m still very much new at HTML and CSS, so sorry if my question isn’t as sharp as it should be, but bear with me:

    I currently have a video looping at the top of my web page, with a poster added. I want to make it so that the image I have set as a poster can be used as a replacement for the video when users are on a device with a maximum width of 940px. How do I do this? This is where my code is at so far:

    HTML:

    CSS:

    video {

    height: auto;

    width: 100%;

    }

    @media only screen

    and (max-device-width: 940px) {

    .videos {

    display: none;

    }

    #image {

    display: inline;

    }

    }

    @media only screen

    and (min-device-width: 940px) {

    .videos {

    display: inline;

    }

    #image {

    display: none;

    }

    }

    What is wrong here? Now when I open the page, the video starts playing regardless of screen width.

    # September 28, 2018 at 12:27 pm

    ’m still very much new at HTML and CSS, so sorry if my question isn’t as sharp as it should be, but bear with me:Nox Showbox Mobdro

    I currently have a video looping at the top of my web page, with a poster added. I want to make it so that the image I have set as a poster can be used as a replacement for the video when users are on a device with a maximum width of 940px. How do I do this? This is where my code is at so far:
    |_________
    no updates!!!

    # September 28, 2018 at 3:26 pm

    Maybe you could show us a live example, preferably a Codepen. I can’t see anything from the CSS that would be incorrect.

    # October 8, 2018 at 12:18 am

    I have this website i.e techboxs.org where i would like to add some video in html.However, i am not able to get it right after lot of attempt can anyone help me here. I have been using wordpress html editor for the job

    # October 8, 2018 at 3:23 am

    @abhi989

    If you have a separate question, please ask it separately.

    BUT you would need to make a Codepen.io demo that we can properly interact with and adapt. A weblink of the existing page is of little use since the options available using Developer tools aren’t really up to the job.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag