CSS or Jquery to Position video below WordPress
- SOLVED
I have created a carousel. Images are positioned below, but videos are not on the bottom. Position absolute is not possible to use, because a script gets a sameheight of all the items...
I need to find a solution to show it on the bottom for each .video-container. With jquery i cant get the height of the .video-container, it shows everytime 0...
I have used the following jquery Script:
if($(".video-container").length){
$("#arti-carousel-wrapper-' . $post_id . ' .owl-item .arti-carousel-item").each(function(){
var artiContainerHeight = $(this).height();
var artiVideoContainerHeight = $(".video-container").height();
alert(artiVideoContainerHeight);
});
}
Here the code of the html when its loaded already:
<div class="owl-item active" style="width: 426px; margin-right: 20px;"><div class="arti-carousel-item arti_carousel_36_sameheight" style="height: 622px;">
<div class="arti-carousel-item-content">
<h3 class="arti-carousel-item-headline">
<span>Selfhosted Video<span>
</span></span></h3>
<p class="arti-carousel-item-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="video-container">
<video controls="" width="100%"><source src="http://neu.designforhumans.studio/wp-content/uploads/2019/10/SampleVideo_1280x720_1mb.mp4" type="video/mp4"></video>
</div>
</div></div>
Here the Link for a Testpage:
http://neu.designforhumans.studio/beispiel-seite/
It should be also with older browsers compatible. i therefore prefer jquery
Answers (2)
Hugo Gonçalves answers:
Hi User183722!
Add this to your CSS:
.video-container {
position: absolute;
bottom: 0;
}
User183722 comments:
Thats not possible, because the height get loaded by a script after time... i need an other solution
Hugo Gonçalves comments:
Then, try adding it through JS.
After the height is loaded add this:
var video_containers = document.querySelectorAll(".video-container");
video_containers.forEach(function (item) {
item.style.Position = "absolute";
item.style.Bottom = 0;
}
User183722 comments:
That i have checked also, i cant do it after the otrher function is loaded. I have no callback possibility...
Hugo Gonçalves comments:
What browsers support do you need to have? In terms of version / capabilities.
User183722 comments:
I mean it should be compatible with all popular browsers, also microsoft edge etc. . Really old versions like the old Internet Explorer are no longer necessary.
User183722 comments:
Thats the SameheightScript:
https://github.com/justinforce/jquery-sameheight
Perhaps it is possible to create a callback function
Hugo Gonçalves comments:
Try this in your CSS, let's see if this works:
.arti_carousel_36_sameheight {
display: flex;
flex-direction: column;
}
.arti-carousel-item-content {
flex: 1;
}
User183722 comments:
It works fine, is it possible to use it in older browsers?
Hugo Gonçalves comments:
As with everything web related internet explorer is a bit quirky with this.
https://caniuse.com/#feat=flexbox
You can try to solve it by using a Polyfill, such as this one:
https://github.com/jonathantneal/flexibility
Hugo Gonçalves comments:
Although to be fair, i'm not sure if what w'ere doing here has any problems under iexplorer.
Only testing it you can find out, and then if any problem arises then include the Polyfill script.
We are using pretty basic Flexbox stuff here.
Samiha answers:
Please try this:
.video-container{
position: fixed;
bottom: 0;
}
and
.video-container iframe{
position: fixed;
top: unset;
height: auto;
}
And here is browser support:
https://www.w3schools.com/cssref/pr_class_position.asp
User183722 comments:
I have checked it, unfortunately it does not work. I will use the flex version...