I need to make youtube videos responsive

On the homepage of my site http://***club.love, you will see a TV. I want to put a youtube video element inside of it be inside that TV. Also it needs to be responsive and the video should be kept inside the "TV" in tablet and mobile. How can I achieve?

  • Dimitris

    Hello there Danny,

    hope you're doing good today! :slight_smile:

    I took the approach of having this image as a background image and fine-position the YouTube iframe in there. Here's how I've made this (I've added this in the post content of a testing page):

    <p id="my-video"><iframe width="500" height="355" src="https://www.youtube.com/embed/pfUgfmwIrAI?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
    <style>
    #my-video {
        padding: 15px;
        width: 719px;
        height: 600px;
        background: url(https://locals.dev/wp-content/uploads/2018/01/TV-1-719x600-5929.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    #my-video iframe {
        position: relative;
        top: 164px;
        left: 127px;
        width: 500px;
        height: 355px;
        border-radius: 5px;
    }
    </style>

    https://monosnap.com/file/F8PKWbwR359ahBuxW3ZJquCII7avgv
    https://monosnap.com/file/8w8S5MkL2ApFiH9oYbuuClFERiYwbz

    Please keep in mind that this will work only for large, desktop monitors, and you should use some media queries or Upfront's responsive mode, in order to fine-tune the position and dimensions of background image and iframe for smaller viewports (tablet and mobile).

    Hope that was some help!
    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.