1

When i am clinking on that Check out Here ! button its not coming perfectly in middle of screen

here is the link for http://wineoir.com/index.html?

i want to align that video part in middle of screen pls help me ! how to do that 

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img src="img/branding-2.jpg" class="img-responsive center-block" alt="tv">

            <p> &nbsp;</p>

        </div>
        <div class="col-md-8 ">
            <p> &nbsp; </p>
            <p> &nbsp;</p>
            <p> &nbsp; </p>
            <p> &nbsp; </p>
            <h2 class="text-center">Now aerate and pour your wine with a button's push<br> Electronic Wine Aerator</h2>
            <p class="text-center"><a href="#video" class="btn btn-default btn-lg">Check out Here ! </a></p>
        </div>
    </div>
    <!-- col -->
    <hr>
    <div class="row">
        <div class="col-md-12">
            <img src="img/bigimage2.png" class="img-responsive center-block" alt="tv">
        </div>
    </div>
    <hr>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p> &nbsp; </p>
            <p> &nbsp;</p>
            <p> &nbsp; </p>
            <h2 class="text-center">Mixes Wine and Air to provide a optimum Wine flavour and mouthfeel Video</h2>

        </div>
        <p class=""></p>
        <div class="col-md-6">
            <div id="video" class="vid">
                <iframe width="450" height="280" src="https://www.youtube.com/embed/e0mM42ZduTQ" allowfullscreen=""></iframe>
            </div>   <!-- vid -->

        </div>
        <!--.col -->

    </div>
</div>
Hitendra Singh Tomar
  • 23
  • 5

3 Answers3

0

if your page will be like this, you can navigate at the bottom of the page with this, and your video will be at the center: at the id='anchor' to your a element

 $("#anchor").click(function() {
      $("#video").animate({ scrollTop: $(document).height() }, "slow");

    });​
Onix
  • 2,129
  • 2
  • 17
  • 26
  • 1
    This is not a quality solution, if today the page is "like this", tomorrow it may not. P.S: Also this won't work for some device sizes in the current case. – Samuil Petrov Feb 24 '17 at 08:20
0

The feeling that it does scroll a bit too low in the page comes from the height of the navbar. I would simply pick an element before the <hr /> tag as an anchor. (Your <p>-tags would come in handy here, but please don't use <p>-tags as spacers, make yourself a CSS class to achieve the desired space effect and then put your anchor tag on a <div> with that class)

Lea Reimann
  • 64
  • 2
  • 7
0

Placing the id="anchor" on another element higher up on the page is not a very clean solution. On your live site, when I click "Check out here", the placement of the video is still not "centered" (although I can still see your video).

Ultimately, if you are concerned with such aesthetics, relying on anchor placement will never be good.

Other strategies:

1 - Find a website theme which provides better layout aesthetics. Usually such themes will use a combination of responsive CSS and Javascript to spread content out, center things nicely and even animate things nicely. You will find a lot of "One page" themes have these kinds of traits. Here's an example. Traditional HTML anchor links are more geared toward easily navigating giant text documents.

2 - Investigate placing your videos in modals which appear gracefully over top of your entire page, with the page dimmed in the background. Like this tutorial.

Kalnode
  • 9,386
  • 3
  • 34
  • 62