I have a #hero div that contains a video and a .headline div. On all browsers except Safari, it renders with the video autoplaying with the headline div overlaid on top of the video. In Safari, the .headline div remains behind the video no matter what I do to the z-indexes of both elements. Can anyone tell me what I'm doing wrong here? Code below. Thanks in advance!
HTML
`<div id="hero" class="col s12 valign-wrapper">
<video class="hide-on-small-only responsive-video col s12" autoplay muted loop>
<source src="<?php echo $video_url; ?>" type="video/mp4">
</video>
<div class="col l4 offset-l6 s12 valign headline">
<div class="headline-inner">
<h1><?php print render($content['field_hero_headline']); ?></h1>
<p><?php print render($content['field_hero_body']); ?></p>
<a download class="btn" href="<?php echo $download_url; ?>"><?php print render($content['field_hero_button_text']); ?></a>
</div> <!--.headline-inner-->
</div> <!--.headline-->
</div> <!--.hero-->`
CSS
#hero {position: relative; width: 100%;}
.headline {background-color: #ffffff; position: absolute; border-left: 3px solid #0053b9;}
Related
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 have the specification load load a modal window with a video using amp-html.
We are trying to achieve this using amp-lightbox with a amp-video inside the modal window. However, the video is not responding to the size of the modal window (I assume this is down to the initial display:none on the lightbox when the page is loaded).
I have the following amp-html;
<a class="travel-results-result-link block relative" on="tap:video-1">
<amp-img class="block rounded" width="346" height="200" noloading="" src="/images/video/image01.jpg"></amp-img>
</a>
//...
<amp-lightbox id="video-1" layout="nodisplay">
<div class="lightbox"
on="tap:video-1.close"
role="button"
tabindex="0">
<div class="modal-body">
<amp-video controls
width="320" height="240"
layout="responsive"
poster="images/video/image01.jpg">
<source src="videos/gail-video-1.mp4" type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
</div>
</div>
</amp-lightbox>
The css for my modal body is simply;
.modal-body {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
margin-top: 75px;
height: calc(100% - 200px);
}
When I click to load the modal both the preload image and video are loading outside the boundaries of the modal-body div? can anyone suggest a way around this?
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>
I am trying to set a background video to full screen.
I can achieve this with height: 100vh; and width: 100%; but as soon as the ratio changes from 16:9, I start to get whitespace.
I have also tried using object object-fit: cover; but this seems to overflow all over the place and I struggle to contain it. It also isn't as widely supported (I.E 11 and and edge 15 don't support it).
I'm not sure if I am complicating things using bootstrap 4 as well.
My HTML is layed out like so
<div class="container-fluid home-page">
<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
<source src="/wp-content/themes/_underscores/assets/Placeholder-Video.mp4" type="video/mp4">
</video>
<div class="row clients">
<div class="client-slider col-12">
<?php foreach($clients as $key => $client) : ?>
<div class="client-logo" style="background-image: url(<?php echo $client->featured_image; ?>)"></div>
<?php endforeach; ?>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 info-text">
<h3>Title</h3>
<p>Content....</p>
SEE HOW IT WORKS
</div>
<div class="col-md-6 col-xs-12 backgroundg">
</div>
</div>
</div>
As soon as I position the video element, everything below it (i.e. .clients) float up to the top because the video element is taken out of the regular document flow. I can give .clients margin-top: 100vh; but then I need to give the video element object-fit: cover; and it floods the whole document as the background.
Just to give you an idea of my css (sass) so far:
video {
object-fit: cover;
width: 100vw;
height: 100vh;
z-index: 0;
position: absolute;
top: 0;
left: 0;
}
.clients{
margin-top: 100vh;
}
I have been looking at a couple of tutorials like https://slicejack.com/fullscreen-html5-video-background-css/ and http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video but I don't think in there example, they have content below the full screen video.
Thanks.
Ended up doing this:
HTML:
<div class="video-container">
<video playsinline autoplay muted loop poster="" id="bgvid">
<source src="/wp-content/themes/_quander/assets/QUANDER_PITCH_CUT_3.mp4" type="video/mp4">
</video>
</div>
<div class="container-fluid home-page">
<div class="row clients">
<div class="client-slider col-12">
<?php foreach($clients as $key => $client) : ?>
<div class="client-logo" style="background-image: url(<?php echo $client->featured_image; ?>)"></div>
<?php endforeach; ?>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 info-text">
<h3>Title</h3>
<p>Content....</p>
SEE HOW IT WORKS
</div>
<div class="col-md-6 col-xs-12 backgroundg">
</div>
</div>
</div>
css:
.video-container{
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
}
.home-page{
margin-top: 100vh;
}
So keeping the .home-page margin-top to 100vh stops the content riding up and overlapping the video.
The video is then dynamic (to the extent of being 100% vw and vh). Then having the overflow: hidden; on the .video-container stops the video flowing all over the page.
It is possible to add responsive video with the below code:
<div class="video_wrapper">
<video width="640" height="360" controls="" autoplay="">
<!-- MP4 must be first for iPad! -->
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<!-- Safari / iOS, IE9 -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<!-- Chrome10+, Ffx4+, Opera10.6+ -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
<!-- Firefox3.6+ / Opera 10.5+ -->
</video>
</div>
.video_wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video_wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This should work for you. I have removed the padding from the container-fluid and used bootstrap class embed-responsive.
.home-page{
padding: 0 !important;
overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid home-page">
<div class="embed-responsive embed-responsive-16by9">
<video playsinline autoplay muted loop poster="polina.jpg">
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>
</div>
<div class="row clients">
<div class="client-slider col-12">
<?php foreach($clients as $key => $client) : ?>
<div class="client-logo" style="background-image: url(<?php echo $client->featured_image; ?>)"></div>
<?php endforeach; ?>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 info-text">
<h3>Title</h3>
<p>Content....</p>
SEE HOW IT WORKS
</div>
<div class="col-md-6 col-xs-12 backgroundg">
</div>
</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.