2

An embedded video will not size to the container div. I've edited the CSS and finally got the poster image to scale correctly, but now the video has cropped on left and right sides by about 50px respectively.

Am I missing a container for the video in the HTML5? Could you please take a look to check my markup and styling?

       .blog-side {
      position: relative;
    }
    
    .wrapper {
      margin: 0 auto;
    } 
    
    
    .videowrapper {
      width: 100%;
      height: auto;
      text-align: center;
      overflow: hidden;
      position: relative;
    }
<section class="blog-side sp-seven blog-style-one standard-post video-post">
        <div class="container">
            <div class="row">
                <div class="col-md-9 col-sm-12 col-xs-12 content-side">
                    <div class="blog-details-content">
                        <div class="wrapper">
                            <div class="videowrapper">
                            <div class="embed-responsive embed-responsive-16by9">
                            <video class="embed-responsive-item" controls poster="images/news/orphan.png">
                            <source src="video/video1.webm" type="video/webm">
                              </video>
                                </div> 
                            </div>
                        </div>

Many examples and instruction that I'm finding on google don't seem to work. I'm trying to keep the code clean.

randomcoder
  • 626
  • 7
  • 20
jim
  • 31
  • 2

1 Answers1

0

Aspect Ratio

In the following demo any tag with non-Bootstrap classes was removed (it's a variable we can do without ATM. The Bootstrap looks good, There's two possible issues:

  1. It could one or more of the non-Bootstrap classes.

    or

  2. The dimensions of your video isn't 16:9 ex. 640x360px, 1024x576, etc. The Bootstrap class .embed-responsive-16by9 requires that your video have an aspect ratio of 16:9.

Demo

The video in this demo is 320x240px an aspect ratio of 4:3 and the video tag has the class .embed-responsive-4by3

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

<main class="container">
  <section class="row">
    <section class="col-md-9 col-sm-12 col-xs-12">
      <figure class="embed-responsive embed-responsive-4by3">
        <video class="embed-responsive-item" controls>
       <source src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.ogg" type="video/ogg">
     </video>
      </figure>
    </section>
  </section>
</main>
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • Thank you for pointing out the aspect ratio. A quick edit to 4by3 solved the problem. – jim Jan 30 '19 at 21:56