Member Avatar for Stefce

I have a problem with bootstrap design i want to make a very simple page which will contain two buttons and a video. The prob. is i dont know how to align theese two buttons with the video in one row here is the code i have:

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-offset-2 text-center">

                <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>

                <div class="embed-responsive embed-responsive-16by9">
                     <iframe class="embed-responsive-item" src="..."></iframe>
                </div>

                <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>

            </div>
        </div>
    </div>
</body>

here is an example how i want to look CLICK HERE

EDIT At the moment the arrows are up and below the video

Thank you very much

Edited by Stefce
  • 4 Contributors
  • 20 Replies
  • 450 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Damhart
Member Avatar for Stefce

Other members PM me that they can not reply to this thread... Whats the problem?

Member Avatar for JamesCherrill

I don't have an answer - I'm just checking that it's possible to reply now... JC

Member Avatar for gentlemedia

This is a way you could do it.

Give the following tag a class for example video
<div class="col-lg-8 col-md-offset-2 text-center video">

Add this to your custom CSS, but adjust the left and right values untill your satisfied with the positioning and instead of px you're also probably better of using % if the layout is responsive.

.video { position: relative }

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.video .glyphicon-menu-left { left: 20px }
.video .glyphicon-menu-right { right: 20px }
Member Avatar for Stefce

why i need to enter minus values to show the arrows left and right 

.video { position: relative }

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.video .glyphicon-menu-left { left: -36px }
.video .glyphicon-menu-right { right: -36px }

EDIT Also when i resize the window the arrows are not visible

Edited by Stefce
Member Avatar for gentlemedia

Yeah, the minus values is also a commom thing to do with a UI like this, but I didn't know that that div tag where we added the video class to, was more or less a wrapper for the embed-responsive div tag and that it spanned the same width.

Are the arrows not visibile anymore at a certain MQ breakpoint?

Member Avatar for Stefce

Yup the arrows are not visible when i resize to phone size the window. I need to move the srcollbar instead to see right arrow.. but left arrow is completly out of vision

here is picture to see
http://imgur.com/a/zA0Ch

http://imgur.com/a/aGqtl

Edited by Stefce
Member Avatar for gentlemedia

I assume that the MQ's are the default ones from Bootsrap - http://getbootstrap.com/css/#grid-media-queries - thus you could do something like this.

First add some styles to the .video CSS and we add a CSS block for this .video in a 768px MQ.

.video {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

@media (min-width: 768px) {

    .video {
        width: auto;
        margin: auto;
    }

}

You might wanna adjust the 90%. Just see what fits best or you could also use calc()to get more precise

width: calc(100% - 80px)

Member Avatar for Stefce

This solves the problem but another comes up.. The video at the full size windows is now too small.. here is the full code of the page

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>title</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
    .video {
        position: relative;
        width: 80%;
        margin: 0 auto;
    }

    .video .glyphicon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .video .glyphicon-menu-left { left: -36px }
    .video .glyphicon-menu-right { right: -36px }

    @media (min-width: 768px) {

        .video {
            width: auto;
            margin: auto;
        }

    }
    </style>

</head>

<body>
    <!-- Page Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h1>ADVERTISEMENT</h1>
            </div>
        </div>
        <hr>
        <div class="row">
            <h2>Some very nice Title!</h2>
            <div class="col-sm-8 col-md-offset-2 text-center video">

                <h1><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></h1>

                <div class="embed-responsive embed-responsive-16by9">
                     <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8"></iframe>
                </div>

                <h1><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></h1>
                <h3>Some very nice description about the video...</h3>

            </div>
        </div>
    </div>
    <!-- /.row -->
    <!-- jQuery Version 1.11.1 -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

EDIT More friendly code look: https://pastebin.com/zHV9NgZr

Edited by Stefce
Member Avatar for gentlemedia

It's probably because the classes .col-sm-8 or .col-md-offset-2 have set a width in bootstrap.min.css which we override with the width: auto on .video.

You will have to figure out the value of that width in the 768px MQ in bootstrap.min.css. Use the dev tools (inspect element) in your browser to see what that width should be and use that same value in your 768px MQ for the width of .video aswell.

Member Avatar for Stefce

When i remove the col-sm-8 col-md-offset-2 classes the video hoes full width but thats acually too large for watching and page functinality please help ..

Member Avatar for gentlemedia

You should not remove thiose classes.
Anyway... let's try something else by not messing with the width of that .video div, but just add a padding.

.video {
    position: relative;
    padding: 0 10%;
}

@media (min-width: 768px) {
    .video {
        padding: 0;
    }
}
Member Avatar for gentlemedia

It's easier for me to debug if I see a demo in Jsfiddle or codepen, so I made one myself.

https://codepen.io/gentlemedia/full/ZyoXdN/

On small screens the arrows were behind the video again, so the left and right properties gets another value on smaller screens in this case I have them both at 20px

Here's the nw CSS:

.video {
    position: relative;
    padding: 0 10%;
}

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
}

.video .glyphicon-menu-left { left: 20px }
.video .glyphicon-menu-right { right: 20px }

@media (min-width: 768px) {

    .video { padding: 0 }

    .video .glyphicon-menu-left { left: -36px }
    .video .glyphicon-menu-right { right: -36px }

}

Oh and by the way... don't wrap your span tags in h1 tags to make the arrows bigger in size. If you want them bigger just add a font-size in your CSS, like I did to .video .glyphicon
.

Edited by gentlemedia
Member Avatar for Stefce

Almost DONE... This code is good with little numbers chaning but it has one more problem at certain windows size the video goes at the very left side and as you slowly decrease the size of the window it goes back to normal try to focus on resizing and you will see what is happening

Member Avatar for gentlemedia

Do you use also Bootstrap V4?

Member Avatar for Stefce

Nope, still on old version

Member Avatar for gentlemedia

It's because of this rule:

@media (min-width: 768px) {

    .col-sm-8 {
        width: 66.66666667%;
    }

}

But you can override this with the following updated CSS:

.video {
    position: relative;
    padding: 0 10%;
}

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
}

.video .glyphicon-menu-left { left: 20px }
.video .glyphicon-menu-right { right: 20px }

@media (min-width: 768px) {

    .video {
        width: 100%;
        padding: 0;
    }

    .video .glyphicon-menu-left { left: -36px }
    .video .glyphicon-menu-right { right: -36px }

}

@media (min-width: 992px) {

    .video { width: 66.66666667% }

}
Edited by gentlemedia
Member Avatar for Stefce

Still same problem, i think the class col-md-offset-2 have something with this problem but am not sure? BTW i must ask, is it easier to do this without bootstrap, just with clean CSS? If yes lets do it that way.

EDIT I really want this to be done in clean bootstrap if is possible but also in CSS too, just for learning purposes.

EDIT 2 The problem is fixed with the last UPDATED CSS, i really dont know my localhost is so slow with updating the code

Edited by Stefce
Member Avatar for gentlemedia

BTW i must ask, is it easier to do this without bootstrap

Well, for me it's easier to do without Bootstrap :) and CSS is really not that hard unless you have to support old IE.

Glad it's sorted now!

commented: Thank you @gentlemedia :) +2
Member Avatar for Damhart

Lol, was just about to answer this but saw that it was already answered.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.