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>
Related
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>
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?
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.
I'm trying to use an element Audio into my app.
When i put my audio element like that:
<audio controls>
<source src="http://dl.dropbox.com/u/1538714/article_resources/song.m4a" type="audio/mpeg">
</audio>
Audio element works fine, but when i try to use sliders for control volume/select a time song i can't drag the silders of default control, i only can click in the slider.
i want the default behaviour:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all
What i am doing wrong?
This code will help your access the sliders,
<a class="lazyImage" href="jsImgSlider/images/image-slider-3.jpg">Slide 3</a>
<audio preload="none" data-image="jsImgSlider/images/image-slider-5.jpg"
data-alt="Lorem ipsum dolor sit amet" controls>
<source data-src="prod/mcaudio.mp3" type="audio/mpeg">
<source data-src="prod/mcaudio.ogg" type="audio/ogg">
</audio>
</div>
<!--thumbnails-->
<div id="thumbs" data-autovideo="true">
<div class="thumb">
<img src="jsImgSlider/images/thumb1.jpg" /><div class="playvideo"></div>
</div>
<div class="thumb">
<img src="jsImgSlider/images/thumb3.jpg" />
</div>
<div class="thumb">
<img src="jsImgSlider/images/thumb5.jpg" /><div class="playvideo"></div>
</div>
</div>