So here's the thing I am trying to do.
I have a video/gif which I want to put on my bootstrap site. I've also got a **p** tag which I want to show over the video and a tint screen so that my paragraph is visible.
<div id="headerwrap">
<div class="col-lg-12">
<video id="background" autoplay="" loop="" muted="" poster="http://i.imgur.com/TFjSLGK.png">
<source src="http://sendvid.com/wdn96a4c" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="tint">
</div>
<div class="col-lg-8 col-lg-offset-2">
<h1>Test</h1>
<h2>Make what people love.<br>
</h2>
<h2>This is testing the gif</h2><br><br>Learn More
</div>
</div>
</div>
</div>
</div>
I also have got a screenshot of the video which will be initially present while the video loads and once video starts playing it goes below the video.
Here's the fiddle for the same.
PS: For some reason, the video isn't loading.
Related
I have a template looks like this:
Now I want to replace the Background image with a Background video. So I tried adding this <video> to the section:
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="container position-relative" data-aos="fade-up" data-aos-delay="500">
<h1>Welcome to Day</h1>
<h2>We are team of talented designers making websites with Bootstrap</h2>
Get Started
</div>
</section><!-- End Hero -->
But as you can see the video collapses the next div like this:
I also tried changing background image source to video but didn't load the video:
#hero {
width: 100%;
height: calc(100vh - 110px);
background: url("https://www.w3schools.com/howto/rain.mp4") top center;
background-size: cover;
position: relative;
}
Result:
So how can I load the background video properly so that next div which is the welcome message will be over that and not next to it?
UPDATE:
Code:
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="container position-absolute" data-aos="fade-up" data-aos-delay="500">
<h1>Welcome to Day</h1>
<h2>We are team of talented designers making websites with Bootstrap</h2>
Get Started
</div>
</section><!-- End Hero -->
Result:
Looks like you just need to use position:absolute instead...
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="container position-absolute" data-aos="fade-up" data-aos-delay="500">
<h1>Welcome to Day</h1>
<h2>We are team of talented designers making websites with Bootstrap</h2>
Get Started
</div>
</section><!-- End Hero -->
Demo
hi i created responsive website, for android it is working fine but for ios/iphone it does not showing me the videos and thumbnail till i click play button what could be the issue,
here is my some html code and iphone screenshots
here is the iphone screenshot
<body>
<div class="container">
<div class="row">
<div id="ls-video">
<ol>
<li *ngFor="let animalvideo of Animalvideos">
<video class="mycheck" (click)="videoshow(animalvideo)" preload="metadata" controls [src]="'http://54.172.101.222:8080/'+animalvideo.filePath" type="video/mp4" playsinline loop muted ></video>
</li>
</ol>
</div>
<div id="video-play">
<video id="video-side" preload="metadata" [src]="'http://54.172.101.222:8080/'+selectedVD" type="video/mp4" alta="show" controls playsinline loop muted ></video>
</div>
</div>
</div>
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'm trying to activate a video background. However, I can't get it to play.
<section class="home-section home-full-height bg-dark-30" id="home" data-background="assets/images/section-5.jpg">
<div class="video-player" data-property="{videoURL:'https://youtu.be/x4JSQ7hQCec', containment:'.home-section', startAt:18, mute:false, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}></div>
<div class="video-controls-box">
<div class="container">
<div class="video-controls"><a class="fa fa-volume-up" id="video-volume" href="#"> </a><a class="fa fa-pause" id="video-play" href="#"> </a></div>
</div>
</div>
I have attempted to modify / remove:
<section class="home-section home-full-height bg-dark-30" id="home" data-background="assets/images/section-5.jpg">
It does nothing.
You can display video with iframe as below
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://youtu.be/x4JSQ7hQCec?rel=0" allowfullscreen></iframe>
</div>
Or use video tag as below
<video class="video-fluid z-depth-1" autoplay loop controls muted>
<source src="https://youtu.be/x4JSQ7hQCec" type="video/mp4" />
</video>
After I play a youtube video on my website using autoplay how сan I prevent it from displaying the Next videos? Here's my code:
<p>
<div class="w3-row w3-padding-0">
<div id="topleftfadein" class="w3-col s12 l12 m12 w3-margin-bottom animated fadeInLeft slower w3-white">
<div class="videoWrapperOuter">
<div id="yt1" class="videoWrapperInner">
<iframe src="https://www.youtube.com/embed/TMEmv9uienU?autoplay=1&modestbranding=1&controls=0"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
Add ?rel=0 to the end of the video URL. Example: src="https://www.youtube.com/embed/vXkQSiJG7fk?rel=0"
Make sure the URL has /embed/ instead of /watch?