I know this questions has been asked numerous times but I can't seem to fix the problem at my case. So I have added youtube video iframe to my website and while the video isn't playing it shows it in a full screen. Then when I click play it adds gaps on left and right and video isn't playing in a full size. I checked from console and found out that the video tag is caussing problems. I tried adding css to video tag but it seems like its not even showing in console, so it's not added.
HTML:
<iframe height="450" src="https://www.youtube.com/embed/ftAQc3L1gR4?rel=0&autoplay=0&loop=0&modestbranding=0&showinfo=0&feature=0&controls=0&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" id="player_1" style="width: 100%;"></iframe>
CSS:
iframe video {
width: 100% inherit !important;;
height: inherit !important;
left: inherit !important;
top: inherit !important;
position: relative !important;
}
You can check the issue here: https://raadev.wpengine.com
You can go to the third slides and there will be a youtube iframe showing in 100% width, but when you click play it will show gaps on both sides.
Can anyone please help me fix this issue?
<div class="videoContainer">
<iframe class="videoContainer__video" width="1920" height="1080" src="http://www.youtube.com/embed/IsBInsOj8TY?modestbranding=1&autoplay=1&controls=0&fs=0&loop=1&rel=0&showinfo=0&disablekb=1&playlist=IsBInsOj8TY" frameborder="0"></iframe>
</div>
And your CSS should be something like this:
.videoContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
iframe {
/* optional */
width: 100%;
height: 100%;
}
I remembered I had this problem long time ago and I made an answer here: Scale and reposition iframe like background-size: cover
It needs jQuery to make it work. (and change slightlly your iframe properties)
Fiddle
From my experience you will not be able to with your current (Desktop) slider height.
Youtube will always try to keep the aspect ratio of the video so given the restriction of container widths and heights you will sometimes see black "bars" from either the left and right or top and bottom.
I deal with it by making my video link and a thumbnail and after clicking that thumbnail i open a pupup with the iframe or video i want to display.
Just keep in mind the aspect ration
Recommended YouTube video dimensions: 240p (426 x 240), 360p (640 x 360), 480p (854 x 480), 720p (1280 x 720), 1080p (1920 x 1080), 1440p (2560 x 1440), 2160p (380 x 2160) - (Source by: Kristen McCabe)
Hope this helps =]
Related
I have a webcam feed that is coming in and we are using the following options for the constraints:
const maxSize = 1920;
stream.getTracks()[0].getTracks()[0].applyConstraints({
width: {
exact: maxSize,
},
height: {
exact: maxSize,
},
aspectRatio: {
exact: 1.0,
}
});
If I check after to make sure the constraints have applied using:
const settings = this.stream.getTracks()[0].getSettings();
console.log('video settings: ', settings);
I can see the width and height are both 1920 and the aspect ratio is 1.0. The webcam is able to go up to like 4000x3000.
I am then streaming that to a video tag that has a height and width of 1920px.
<div class='container'>
<video id="selfie-video" width="1920" height="1920" />
</div>
.container {
width: 1080px;
height: 1920px;
overflow: hidden;
}
#selfie-video {
margin: 0;
padding: 0;
object-fit: cover;
width: 1920px;
height: 1920px;
left: -420px;
position: absolute;
top: 0;
}
I am displaying this on a screen that is set to portrait mode 1080x1920. When I test this in Chrome I have no issues at all unless you hit F11 and put Chrome into Fullscreen Mode or if you open it in electron. As soon as Chrome goes into fullscreen mode or you open it in electron the width is constrained to 1080px. It allows the width to be less than 1080px but not more. I can set it to something crazy like 4000px width and it is just completely ignored. Same goes with height you can set the height anything up to 1920px tall, but if you go over that it is just ignored.
This is causing the image to get squished because 1920px wide is be crunched into 1080px.
The reason we do 1920x1920 is because we let people rotate the image, so we use css to do a transform: rotate(90deg); so it needs to be 1920px for both dimensions.
I can't find any documentation or explanation as to why this is happening. No issues with overflow on any other type of element but this <video>.
So we figured out how to trick it into displaying right. We had to add a top: 5px; position: fixed; I guess it tricks Chrome into thinking the video isn't fullscreen. It isn't perfect because we have a small bar at the top above the video but it will work. I attached 3 screenshots, one so you can see it working and the video isn't squished, and then two with those 2 css rules disabled.
so I'm somewhat new to front-end development and took it upon myself to learn it through trial and error but it seems as if I've hit a dead-end recently. I'm trying to position two google embeds (Google maps & forms) side-by-side but that only lead to having awkward aspect ratios between the two. My question is how can I align two iframes (Google maps & forms) embed inside of a container to have them display side-by-side when they're on a desktop and vertically on mobile while maintaining a comfortable aspect ratio(responsive width and height) to the user?
Here's what I have so far:
This is the look I'm going for:
Contact Page with Contact Form and Google Maps embed side-by-side on desktop and vertically aligned on mobile
You would need to use "css media queries" in order to reposition items in an html page based on screen size.
I have made an example here, please feel free to copy paste this code onto your project :).
I can see you are a new developer here, and I would like you to note for next time that it would make people's jobs easier if you could copy your code and paste it into stackoverflow instead of taking a screenshot.
(The snippet below works better when you press on expand snippet and resizes to fit browser size)
<style>
.container{
display: flex; /*Set div as flexbox to override default margins*/
}
iframe{/*Perform to all iframes*/
width: 50%;
margin: 10px;
}
#media only screen and (max-width: 900px) {/*When screen size is below 900px*/
.container{/*Make the form and map stack over each other*/
flex-direction: column;
/*flex-direction: column-reverse;*//* If you want them to stack the other way around*/
}
iframe{
width: 100%;/*Make iframes take up entire screen since they are no longer next to each other*/
}
}
</style>
<div class="container">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSciufqdxJmnuDrbnCQywya61Tbf5sdf0RXKvbu4rNi7_Dba7gyjQ/viewform?embedded=true" id = "form" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:
<div>
<iframe src="blablabla.com" height="315" width="560" allowfullscreen="" frameborder="0">
</iframe>
THE CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
Explanation of this CSS
Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.
The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.
Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.
After all this, you can just deal with your iframe
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
This is a really problematic issue, which seems to have no solutions, so I hope you can help with it.
The issue is when adding an element over youtube video iframe, it shouldn't let to click the video and it doesn't on desktop version. But on mobile it clicks through the element if the video appears near to the side of the main window and the target is at the side too.
Try the jsfiddle in device mode and try to click the video at the side of the main window (https://i.imgur.com/uKk5CWL.png):
https://jsfiddle.net/vjtfopdw/
Code to test:
<iframe width="560" height="349" class="video" src="https://www.youtube.com/embed/tvIXmaJMD8M?rel=0&controls=0&showinfo=0&wmode=transparent&playsinline=1" frameborder="0" wmode="opaque" allowfullscreen="" ></iframe>
<div style="
position: fixed;
z-index: 99999999;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.67);">
</div>
I've tried setting higher zindex, moving the element more to each side, adding and removing wmode=transparent & opaque, nothing helps.
Is there a way to modify how the fullscreen functionality of a video behaves in a browser? I would like to display the video on the left side of my screen and an image (actually a PDF) on the right side.
I have tried it with css in chrome:
video:-webkit-full-screen
And that gave me some results, but not the desired one. Should I create a custom action for this? And if so, how can I let the video break out of the borders of the browsers?
You should insert the <video> tag inside a <div> with a defined height and width with the following attributes:
.video-container {
position: relative;
height: auto;
width: 60%;
}
video {
width: 100%;
max-width: 500px; // Or whatever value on your choice
height: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
With a width of 100%, the video would fill the entire browser space but limit how big it can be by setting a max-width or max-height for the resolution and the responsiveness. I hope that my answer helps you!
EDIT
To fit in properly inside a div, you have to assign to the container position: relative and position: absolute to the video itself. If you want to break out from the borders, then you have to tweak the dimensions of max-height and max-widthof the video.
Check this question, since it is similar to yours.
Hello Stackoverflow community,
I am wondering how to get a hero background video to stay centered in the page no matter what, such as this http://thisisdk.com/
Purely through css, or through very minimal js.
The problem I have had is that I cannot keep the video in the center while resizing the window. I am okay with cropping! I just want it in the center without resizing.
This is my current test page, https://dl.dropboxusercontent.com/u/96682768/VidTest.html
#intVid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: 100%; z-index: -100;
background-size: cover;}
<video id="intVid" preload="auto" autoplay="autoplay" loop="loop" ><source src="showtest.mp4" type="video/mp4">bgvideo</video>
I have searched the web for a few hours and found no solution... not sure if this is over my head.
Thank you in advance!