Responsive Video

Hello, I have a Video with Responsive capabilities sitting under
a row. I want to put content next to the video like so:

but I think the responsive code is getting in the way of me putting it next to it. I tried using display:inline-block on the div but did not wok PAGE

HTML:

<div id="dentalhealth-wrap">
             <div class="row">
                 <div class="col-sm-6">
                     <!-- 16:9 aspect ratio -->
                        <div class="embed-responsive embed-responsive-16by9">
                          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kGt4Uo5zP-s"></iframe>
                        </div>
                </div>
            </div>
                 <div class="div-info-box">
                          <h3>Preferred Sonic Toothbrush with UV Sanitizer</h3>
                         <p>SGB lab test proved our UV sanitizer effectively kills over 99.9% bacteria on the toothbrush. 
This is vital because bacteria left between the gums and teeth can cause infection</p>
                    </div>
            </div>

CSS:

#dentalhealth-back {
    background-image: url(http://impactograph.com/images/dentalhealth_back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}


.div-info-box {
    background-color: #fff;
    opacity: 0.8;
    padding: 1em;
}

.div-info-box h3 {
    color: #00546f;
    font-weight: bold;
}

.div-info-box p {
    color: #000000;
    font-size: 18px;
}

Hi there csosa,

here is one possible solution…

[code]

untitled document #dentalhealth-wrap { padding:2% 0; background-image:url(http://impactograph.com/images/dentalhealth_back.jpg); background-repeat:no-repeat; background-size:cover; overflow:hidden; } #iframe-holder { float:left; position:relative; width:32%; padding-top:18%; /* this value is equal to the width multiplied by the iframe's aspect ratio (9:16) */ margin:0 2%; } #iframe-holder iframe { position:absolute; top:0%; left:0; width:100%; height:100%; border:0; } .div-info-box { float:right; width:60%; margin:0 2%; box-sizing:border-box; background-color:rgba(255,255,255,0.8);; padding:0 1em; vertical-align:top; font-size:100%; overflow:auto; } .div-info-box h3 { color:#00546f; } .div-info-box p { color:#666; } @media screen and (max-width:800px) { #iframe-holder { display:block; float:none; width:56%; padding-top:31.5%; margin:0 auto 20px; } .div-info-box { display:block; float:none; width:auto; } } @media screen and (max-width:480px) { #iframe-holder { width:256px; padding-top:144px; } }

Preferred Sonic Toothbrush with UV Sanitizer

SGB lab test proved our UV sanitizer effectively kills over 99.9% bacteria on the toothbrush. This is vital because bacteria left between the gums and teeth can cause infection

[/code]

coothead

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.