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.
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:
It could one or more of the non-Bootstrap classes.
or
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>
Related
I have a very simple page in which have 2 columns. video and content i need to do width and height responsive something like image-fluid.
My code
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-6">
<div>
<video muted="" autoplay="" loop=""
src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4"
width="950">
<img src="https://storage.googleapis.com/cms-storage-bucket/a667e994fc2f3e85de36.png" alt="Fast">
</video>
</div>
</div>
<div class="col-lg-4 col-md-6 align-self-center" >
<h3>Fast</h3>
<p>Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.
</p>
</div>
</div>
</div>
Like this
.video_div{
margin-left: -210px;
}
#media (max-width:1199px){
.video_div{
margin-left: -270px;
}
}
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-12">
<div class="video_div">
<video muted="" autoplay="" loop=""
src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4"
width="950">
<img src="https://storage.googleapis.com/cms-storage-bucket/a667e994fc2f3e85de36.png" alt="Fast">
</video>
</div>
</div>
<div class="col-lg-5 col-md-12 align-self-center" >
<h3>Fast</h3>
<p>Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.
</p>
</div>
</div>
</div>
You can Wrap any video tag in a parent element with .embed-responsive and an aspect ratio. The video tag can be given a .embed-responsive-item class as well
<div class="embed-responsive embed-responsive-21by9">
<video class="embed-responsive-item" muted="" autoplay="" loop="" src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4" width="950">
<img src="https://storage.googleapis.com/cms-storage-bucket/a667e994fc2f3e85de36.png" alt="Fast /">
</video>
</div>
Official Bootstrap Docs - embed
If you are using Bootstrap 5, you can use the ratio helper :
Use the ratio helper to manage the aspect ratios of external content like
<iframe>s, <embed>s, <video>s, and <object>s. These helpers also can
be used on any standard HTML child element (e.g., a or ).
Styles are applied from the parent .ratio class directly to the child.
source : https://getbootstrap.com/docs/5.0/helpers/ratio/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
I am trying to apply border radius corner edges in html video but unfortunately not applying please help me how can I do that ?
html view
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="rounded">
<video width="100%" height="800" autoplay loop muted>
<source src="{{ url('') }}/castle-theme-assets/video/video-slider.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
css
.rounded {
border-radius: 20px;
overflow: hidden;
-webkit-transform: translateZ(0);
margin-top: -43px;
}
try doing it directly inside the video tag or the source tag by adding a class to the source or video tag to see if it will reflect.
I want to make my iframe responsive.
Following is my code
.game_frame iframe {
display: block;
margin: auto;
}
<div class="col-md-12">
<div class="game_frame">
<iframe src="http://www.freeonlinegames.com/embed/142842" width="800" height="400" frameborder="no" scrolling="no"></iframe>
</div>
</div>
Even i changed this
<div class="col-md-12">
Too
<div class="embed-responsive embed-responsive-16by9 col-md-12 text-center">
but still facing problem and my iframe is not in center. I don't wanna use full width iframe, i wanna
width="800" height="400"
EDIT :- Iframe on Dextop site , Iframe on Mobile site
Bootstrap doesn't have a 2:1 ratio (for your 800x400 example) responsive embed utility; you'd have to add a class to your CSS and HTML:
.embed-responsive-2by1::before {
padding-top: 50%;
}
Edit:
I wasn't able to properly load http://www.freeonlinegames.com/embed/142842 in any browser I tried for whatever reason, but the the following code should work; just replace the dummy img with the iframe: https://codepen.io/pixleight/pen/KvEWRJ/
.embed-responsive-2by1::before {
padding-top: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="embed-responsive embed-responsive-2by1">
<img src="//dummyimage.com/800x400" class="embed-responsive-item" />
</div>
</div>
I having been trying for days now to move a video on top of a <div> which includes an <img>
Effectively I am trying to make the image of a TV show a video on its screen.
Could somebody help me in positioning the video so it is central to the image inside the screen. I can't even get the video to position on top of the <img> let alone making it the correct size and centering it.
Thanks in advance. Much appreciated.
<div class="videocontainer">
<h1 class="videosheading"><strong>VIDEOS</strong></h1>
<div class="videogallery">
<div class="row">
<div class="col-xs-12">
<img class="img-responsive" src="img/TVWALLTWO.jpg">
<video controls="" height="330" width="440">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
</video>
</div>
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
</div>
.videosheading {
color: #E3A750;
text-align: center;
}
.videogallery {
height: auto;
}
video {
background-color: red;
z-index:-1;
position:relative
}
To center the video over the responsive image, you need a container that has position: relative, than the video must have position: absolute. Look at the snippet bellow, hope you get the idea:
.video-cell {
positon: relative;
}
.video-cell img {
width: 100%;
}
.video-cell video {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="videocontainer">
<h1 class="videosheading"><strong>VIDEOS</strong></h1>
<div class="videogallery">
<div class="row">
<div class="col-xs-12 video-cell">
<img class="img-responsive" src="https://placehold.it/880x660">
<video controls width="440" height="330">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</div>
</div>
Also on JSFiddle.
I have been trying to embed a video into bootstrap website.
But when I do, it takes up the whole width and height of the screen. I want it to be 560px x 315px on desktops and it should be responsive when the desktop size goes below 560px.
I have used:
<div class="container-fluid">
<div class="embed-responsive embed-responsive-16by9 div_style">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</div>
When I try to customize div tag by adding div_style class max-width: 560px; and max-height:315px;, It changes video width to 560px but the height takes up the whole page height.
You missed to add col-xs-12 col-sm-6 col-md-4 col-lg-2. Something like this.
<div class="container-fluid">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 padding-zero embed-responsive embed-responsive-16by9">
<div id="foxnews">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KFGbHBbXG_g?modestbranding=1&autohide=1&showinfo=0&rel=0" allowfullscreen="true"></iframe>
</div>
</div>
</div>
The bootstrap embed-responsive classes use padding-bottom to set the "height" of the element.
You can change this property along with width within a media query for your desired effect.
#media all and ( min-width: 560px ) {
.div_style {
width:560px;
padding-bottom:315px !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="embed-responsive embed-responsive-16by9 div_style">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div className="overlay"></div>
<div className='container-fluid vids col-md'>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 padding-zero embed-responsive embed-responsive-16by9">
<video playsInline="playsinline" autoPlay="autoplay" muted="muted" loop="loop">
<source src="videos/design.mp4" type="video/mp4"/>
</video>
</div>