This is the code I'm using for the gallery, bootstrap based template
<div class="col-md-4 ftco-animate">
<div class="gallery img d-flex align-items-end" style="background-image: url(images/gallery/leopardshark.jpg);">
<a href="images/gallery/leopardshark.jpg" class="icon image-popup d-flex justify-content-center align-items-center">
<span class="icon-expand"></span></a>
<div class="desc w-100 px-4">
<div class="text w-100 mb-3">
</div>
</div>
</div>
</div>
I want to replace the background image with a video, is there away to do that and make it autoplay in all browsers? I can get mp4s to work in Safari if I just replace the image url.
You can do it by replacing the img with:
<video autoplay>
<source src="/path" type="video/mp4">
error message
</video>
This will autoplay in Firefox but not in Chrome(they blocked it). So you will need to also use something like this if you don't want to add controls:
$('.class_name').on('load', function(){
$('video').load();
$('video').play();
});
Related
I am using this flexslider plugin for one of the projects with 3 videos and text over them.
My issue is that sometimes when the page reloads it loads the same slide again.
Is there any way to make sure that a new slide is loaded on page load? I have changed it to random, but the issue with that in some cases loads the same slide multiple times. Ideally we would have new content each time the page reloads.
https://www.jqueryscript.net/slider/Awesome-Fully-Responsive-jQuery-Slider-FlexSlider.html
Any suggestions on how can I tweak the script to load the next one on page load. No sliding effect needed.
Thank you.
$(window).on('load', function() {
$('.flexslider').flexslider({
animationLoop: false,
randomize: true,
controlNav: false,
touch: true,
directionNav: false,
smoothHeight: true,
slideshow: false
});
});
<div class="flexslider">
<ul class="slides">
<li>
<video autoplay="" class="FullVideo" loop="" muted="" playsinline="" preload="auto"><source src="/Portals/0/Videos/Pexels1-Nature.mp4" type="video/mp4" /></video>
<div class="wrapper">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-md-6 col-lg-5 ContentOverlay">
SOME CONTENT HERE
</div>
</div>
</div>
</div>
</li>
<li>
<video autoplay="" class="FullVideo" loop="" muted="" playsinline="" preload="auto"><source src="/Portals/0/Videos/Pexels2-Tree.mp4" type="video/mp4" /></video>
<div class="wrapper">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-md-6 col-lg-5 ContentOverlay">
SOME CONTENT HERE
</div>
</div>
</div>
</div>
</li>
<li>
<video autoplay="" class="FullVideo" loop="" muted="" playsinline="" preload="auto"><source src="/Portals/0/Videos/Pexelsvideo-ladymp4.mp4" type="video/mp4" /></video>
<div class="wrapper">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-md-6 col-lg-5 ContentOverlay">
SOME CONTENT HERE
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
hi fiends i'm currently working on a project and i made a img tag that can display .html format urls without iframe how ever accidentally i removed it.anyone know to add a .html link to img tag..
I want to add this advertisement using img tag not with embed or iframe!
pls help!
advertisement-https://s0.2mdn.net/dfp/370694/5128031207/1646966699597/970x250/index.html
not working code of mine
<div class="container mb-3">
<div class="row">
<div class="col-12 ads-parent-responsive d-none d-xl-block d-lg-block d-md-none d-sm-none">
<div class="text-center">
<img type="image/jpg" class="d-block w-100 image" src="https://s0.2mdn.net/dfp/370694/5128031207/1646966699597/970x250/index.html" style="width: 1100px; height: 200px;">
</div>
</div>
</div>
</div>
I would like to put these two images side by side
Here is my code:-
code
<div class="container-md">
<div class="row">
<div class="col-md-4">
<p> Image Video Live Streaming </p>
<img src="" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
<div class="col-md-6">
<p> Depth Video Live Streaming </p>
<img src="" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
</div>
</div>
you code work perfectly with bootstrap 5. Added your code with dummy images in codepen.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<p> Image Video Live Streaming </p>
<img src="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?cs=srgb&dl=pexels-philipp-m-100582.jpg&fm=jpg" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
<div class="col-md-6">
<p> Depth Video Live Streaming </p>
<img src="https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg?cs=srgb&dl=pexels-veeterzy-38136.jpg&fm=jpg" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
</div>
</div>
.row {
display: flex;
justify-content: space-around;
}
this is one way to do it using CSS.
Update:
There is now space around the two images.
Check out this URL to understand more about CSS Flexbox, and all the awesome things you can do !
I would like to have a small thumbnail of a video, uploaded by user in a HTML webpage. When user clicks on it, it shows the video in the same webpage.
I tried this code:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/video/hanson.mp4"></iframe>
</div>
But it is not what I need.
Please note that the videos are not on youtube or so on. And there are numerous video files so the function should be able to create thumbnail from the address of the file on the server.
Is there any way to get thumbnail as I described?
Thanks.
For example this will work with thumbnails in Bootstrap.
Update: Set image src to https
function play(item){
var videoFiles = 'https://www.youtube.com/embed/';
var videoParam = 'autoplay=1&rel=0&showinfo=0&autohide=1';
document.getElementById('player').src = videoFiles + item + '?' + videoParam;
}
<!-- bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-wrap mx-auto" style="width:100%; max-width:400px;">
<div class="col-12 mb-4 player">
<div class="embed-responsive embed-responsive-16by9">
<!-- first item of playlist -->
<iframe id="player" class="embed-responsive-item" frameborder="0" width="560" height="315"
src="https://www.youtube.com/embed/1G4isv_Fylg?version=3&autoplay=0&rel=0&showinfo=0&autohide=1"
allow="autoplay; clipboard-write; encrypted-media" allowfullscreen></iframe>
</div>
</div><!--/.player-->
<div class="col-12 text-center playlist">
<div class="row">
<a class="col-3 mb-3" onClick="play('1G4isv_Fylg')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/1G4isv_Fylg/0.jpg" alt="" />
<div class="card-body py-2"><small>Paradise</small></div>
</a>
<a class="col-3 mb-3" onClick="play('YlUKcNNmywk')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/YlUKcNNmywk/0.jpg" alt="" />
<div class="py-2"><small>Californication</small></div>
</a>
<a class="col-3 mb-3" onClick="play('xik-y0xlpZ0')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/xik-y0xlpZ0/0.jpg" alt="" />
<div class="py-2"><small>A Forest</small></div>
</a>
<a class="col-3 mb-3" onClick="play('1w7OgIMMRc4')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/1w7OgIMMRc4/0.jpg" alt="" />
<div class="py-2"><small>Sweet Child Mine</small></div>
</a>
</div>
</div><!--/.playlist-->
</div>
Just need to add one thumbnail add click event also, I implemented this. look into it,
$(document).ready(function(){
$('#video-id,.demo-play-btn').click(function(){
$('#video-id').get(0).paused ? $('#video-id').get(0).play() : $('#video-id').get(0).pause();
$(".demo-play-btn").toggle();
});
});
.demo-play-btn{
position:absolute;
top:35%;
background:#fff;
left:35%;
cursor:pointer;
}
.demo-play-btn img{
width:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-video">
<video id="video-id" width="470" height="255" poster="https://i.ytimg.com/vi/5Peo-ivmupE/maxresdefault.jpg">
<source src="https://st2.depositphotos.com/4083751/6003/v/600/depositphotos_60037637-stock-video-toddler-with-bottle-and-dummy.mp4" type="video/mp4">
</video>
<div class="demo-play-btn">
<img src="https://lh3.googleusercontent.com/proxy/9Oa4tg5B3DLeqAIsO_qRhmQg_pqtW3RtwBQJYdcv4e44lGfl4UReTpWpe5TDjlyJU3254RakFD48FPfsALnBI2cD6wxt8zMRNtrGEytVkMDHfLxBdiOG7JU-m0csf5RC6AY" class="play-btn" title="Play Video">
</div>
</div>
I want to share the same player not sure how to go about this without javascript and without duplicated player.
Basically, I have the following for mobile:
<div class="d-block d-lg-none d-xl-none d-xxl-none">
<div id="player"> <!-- video player here --> </div>
</div>
And for desktops:
<div class="d-none d-lg-block d-xl-block d-xxl-block">
<div class="container">
<div class="row">
<div id="player"> <!-- same video player here --> </div>
</div>
</div>
</div>
Is there a way to achieve this?
Update: When a user have a desktop browser open that doesn't take all the screen it will show (probably) the first block of code when he adjust so it will take the full screen it will show the second block of code how can I keep the player in his current state from the first block of code to the second one or somehow move it keeping its state?
.d-block{
display:none;
}
#media (max-width: 800px){
.d-block{
display:block;}
.d-none{
display:none;}
}
<div class="d-block d-lg-none d-xl-none d-xxl-none">x
<div id="player"> <!-- video player here --> </div>
</div>
<div class="d-none d-lg-block d-xl-block d-xxl-block">y
<div class="container">
<div class="row">
<div id="player"> <!-- same video player here --> </div>
</div>
</div>
</div>
You can use css media queries to get your result. It'll resize the div based on the viewport width.