Ndtyjky

I have the following html and CSS that I need to make responsive.

It starts with a lightweight YouTube video embedding (less YouTube code to download) found from labnol.org. I then wrapped the youtube-player div with two other divs to horizontally center the video.

I've tried a few solutions I've seen here in SO, but have not been able to make this work. I would like to be able to set the max width in any display, but not have it go off the edge of the screen when viewed on mobile devices.

I would greatly appreciate any help. Thank you.

HTML:

<div id="videoParent" class="videoParent">

<div id="videoDiv" class="videoDiv">

<div class="youtube-player" data-id="gmX8VFlrv38"></div>

</div>

</div>

with the following CSS.

<style>

    <style>

    .videoDiv {

         max-width:560px;

         display:inline-block;

         width:90%;



    }

    .videoParent {

          text-align:center;

    }



        .youtube-player {

            position: relative;

            padding-bottom: 56.23%;

            /* Use 75% for 4:3 videos */

            height: 0;

            /*width:400px; */

            overflow: hidden;

            max-width: 100%;

            background: #000;

            margin: 5px;

        }



        .youtube-player iframe {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

           height: 100%;

            z-index: 100;

            background: transparent;

        }



        .youtube-player img {

            bottom: 0;

            display: block;

            left: 0;

            margin: auto;

            max-width: 100%;

            width: 100%;

            position: absolute;

            right: 0;

            top: 0;

            border: none;

            height: auto;

            cursor: pointer;

            -webkit-transition: .4s all;

            -moz-transition: .4s all;

            transition: .4s all;

        }



        .youtube-player img:hover {

            -webkit-filter: brightness(75%);

        }



        .youtube-player .play {

            height: 72px;

            width: 72px;

            left: 50%;

            top: 50%;

            margin-left: -36px;

            margin-top: -36px;

            position: absolute;

            background: url("//i.imgur.com/TxzC70f.png") no-repeat;

            cursor: pointer;

        }</style>

I simplified my CSS to the following at it appears to be doing what I need it to.

.videoParent {

      text-align:center;

}

.videoDiv {

     max-width:560px;

     display:inline-block;

     width:60%;

   }