Is there a solution/tutorial for full width videos without borders?
I took a look at an existing solution:
Full-width vimeo wrapper background
I tried it but I'm getting unwanted (black) borders when I scale to different viewport sizes.
<div class="video">
<iframe src="https://player.vimeo.com/video/120893740?title=0& amp;byline=0&portrait=0&color=3a6774&autoplay=1&loop=1" width="960" height="600" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div
class="overlay">
<h1>HEADING HERE</h1>
<p>Content Here</p>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
h1, p {
text-align: center
}
.video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%}
.video iframe {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
.video .overlay {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
}
Thanks in advance
Related
I have to set a Vimeo as background for a div which is containing CTA box.
I found some example and made it possible to have the video background fullscreen and responsive as I needed.
But I found that the CTA box inside and the button are not clickable because of the "z-index" used to get the video back in the div.
play with z-index
moving element back and forth
.vimeo-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display:flex;
pointer-events: none;
overflow: hidden;
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.content{
display:flex;
align-items:center;
justify-content:center;
z-index:1;
flex-wrap:wrap;
}.content,h2{
width:100%;
text-align:center;
color:white;
}
.CTA-wrapper{
border:2px solid white;
width:30%;
padding-bottom:2%;
}
div button:hover {
color: yellow;
}
<div class="vimeo-wrapper">
<iframe src="https://player.vimeo.com/video/342964528? background=1&autoplay=1&loop=1&byline=0&title=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="content">
<div class="CTA-wrapper">
<h2>CTA Header</h2>
<button class="btn-success">Click Me</button>
</div>
</div>
</div>
expected: clickable inside elements, fullscreen and responsive background video
result: not the clickable inside element
.CTA-wrapper{
position: relative;
z-index: 9999;
}
I think it will work
css
.vimeo-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display:flex;
pointer-events: none;
overflow: hidden;
}
.content,h2{
width:100%;
text-align:center;
color:white;
}
.CTA-wrapper{
border:2px solid white;
padding-bottom:2%;
}
.vimeo-wrapper-box {
width: 100%;
}
div button:hover {
color: yellow;
}
.iframe_wrapper {
position: relative;
padding-bottom: 56.25%;
}
.vimeo-wrapper iframe {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0px;
width: 100%;
height: 100%;
}
.vimeo-wrapper .content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
HTML
<div class="vimeo-wrapper">
<div class="vimeo-wrapper-box">
<h1>dfghfh</h1>
<div class="iframe_wrapper">
<iframe src="https://player.vimeo.com/video/342964528?background=1&autoplay=1&loop=1&byline=0&title=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="content">
<div class="CTA-wrapper">
<h2>CTA Header</h2>
<button class="btn-success">Click Me</button>
</div>
</div>
</div>
</div>
</div>
I'm trying to embed a youtube video into my project, it works and I also tried to apply a 16:9 ratio with padding-bottom: 56.25% like as most tutorials out there.
The issue is, the height of video is happened to be 100% of the container, What should I fix in my CSS to get rid of the top/bottom blackbar?
Here's my code pen attemp: https://codepen.io/DieByMacro/pen/QXmJez
.HomePage-homeVideoWrapper-274 {
height: 0;
margin: auto;
z-index: 1;
position: relative;
max-width: 720px;
padding-top: 25px;
padding-bottom: 56.25%;
}
.HomePage-homeVideoWrapper-274 iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
}
<div class="HomePage-homeVideoWrapper-274">
<iframe height="auto" src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>
This is very common problem which we are facing while we add a videos on our template.You just need to add max-width and width property on OUTER div not at HomePage-homeVideoWrapper-274. No need to added max-height in HomePage-homeVideoWrapper-274.
.outer {
width: 100%;
max-width: 750px;
margin: 0 auto;
}
.HomePage-homeVideoWrapper-274 {
height: 0;
margin: auto;
z-index: 1;
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
display: block;
overflow: hidden;
iframe {
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
}
}
<div class="outer">
<div class="HomePage-homeVideoWrapper-274">
<iframe src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial"></iframe>
</div>
</div>
Demo
I have a screen with and iframe and a header and a footer. I want to make it sizable, so it works on every screen. This is my html and css:
html:
<header class="topbar">
<h2>Header</h2>
</header>
<section>
<iframe name="main" class="frame" src="login.php" scrolling="yes" frameborder="0">
</iframe>
</section>
<footer class="botbar">
<h2>Footer</h2>
</footer>
css:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
.topbar {
background-color: dodgerblue;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
height: 74px;
text-align: center;
}
.botbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: coral;
height: 74px;
text-align: center;
}
.frame {
position: fixed;
width: 100%;
height: 80%;
float: inherit;
margin-top: 74px;
}
When I run the code, I get a goodworking layout, but when I make my screen smaller, the bottom of the iframe disappears beneath my footer. This is because my footer stays the same, but my iframe changes size. Is there a way to make the footer seem like the bottom of the page?
You may use calc to set iframe height to 100% and remove two 74px (Header and footer height) from it, like this:
.frame {
position: fixed;
width: 100%;
height: calc(100% - 74px - 74px);
float: inherit;
margin-top: 74px;
top: 0;
}
I am trying to make a background video with the fixed height of 700px without affecting the aspect ratio. video can crop. My issue is that the full height of the video is showing even I have provided a height of 700 px. Here is the code:
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="homepage-video-mp4_1.mp4" type="video/mp4" />
</video>
</div>
here is the CSS:
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size:34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
I have tried everything. Sometimes the mobile view gets cut and the text moves way up.
I have added max-height which will be helpful for all screen sizes. Also added a demo text to show the limit of the video. Hope this helps.
#video-bg {
position: relative;
width: auto;
min-width: 100%;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size: 34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="//ak3.picdn.net/shutterstock/videos/2743133/preview/stock-footage-shanghai-china-circa-july-timelapse-video-of-shanghai-china-skyline-at-sunset-circa-july.mp4" type="video/mp4" />
</video>
</div>
<h2>Hello</h2>
I can't manage to get my Google Maps iframe to be centered on the page. I want the iframe to be responsive also. How can I make it responsive and centered? Below is my code.
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
HTML:
<div class="video-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>
Just use text-align:center; on your div. https://jsfiddle.net/w0et2jz1/
Try the below style:
.video-container {
margin: 0 auto;
width: 560px !important;
}
Hope, it will help you for desktop
Here is my solution. Do have a look and let me know if its still not the way you wanted. Thanks.
CSS:
.video-container {
max-width: 70%;
height: auto;
border: 1px solid black;
margin: auto;
}
iframe {
width: 100%;
height: 50%;
}
For your situation if you need it to be fixed width and height on desktop but then be responsive you would need to add one more wrapping div and set the following css.
.container {
position: relative;
max-width: 560px;
margin: 0 auto;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="video-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002"
frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>
</div>
This will make the iframe 560px wide and 315px in height on desktops but then scale down nicely on mobile.
Here's a JSFiddle