Youtube embed code is not working, How can fix this?
https://fiddle.jshell.net/prabu0301/pLwz2bnx/3/
It turns out you were using a wrong src for the <iframe>. You should use
https://www.youtube.com/embed/Foayrk4V5b4?&autoplay=1
instead of
http://www.youtube.com/embed/Foayrk4V5b4?&autoplay=1
The https:// was the problem.
/* --- RESPONSIVE VIDEO --- */
.embed-container {
position: relative;
padding-bottom: 56.25%;
/* 16/9 ratio */
padding-top: 30px;
/* IE6 workaround*/
height: 0;
overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
/* --- This isn't needed, but helps demonstrate the "responsiveness" --- */
.wrapper {
width: 90%;
margin: 0 auto;
}
<div class="wrapper">
<h1>Scale Me - Responsive Video</h1>
<div class="embed-container">
<iframe allowfullscreen="" frameborder="0" scrolling="no" src="https://www.youtube.com/embed/Foayrk4V5b4?&autoplay=1"></iframe>
</div>
</div>
Related
Im trying to embed a youtube live video window and live chat to appear next to eachother like they do on youtube live. Right now the chat appear below the video window, and im stuck with how to align this code:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/VIDEOID' frameborder='0' allowfullscreen></iframe>
</div>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class='embed-container'>
<iframe src='https://www.youtube.com/live_chat?v=VIDEOID&embed_domain=www.mydomain.com' frameborder='0' allowfullscreen></iframe>
</div>
Im trying to embed a youtube live video window and live chat to appear next to each other
According to your wording, I am guessing that you what the video and chat to be side-by-side.
The shortest solution personally I can come out of is using Flexbox while your HTML code remains the same.
body{
display: flex;
flex-direction: row;
}
.embed-container{
flex: 0 0 50%;
}
iframe{
width: 100%;
}
<div class="embed-container">
<iframe src='https://www.youtube.com/embed/VIDEOID' frameborder='0' allowfullscreen></iframe>
</div>
<div class='embed-container'>
<iframe src='https://www.youtube.com/live_chat?v=VIDEOID&embed_domain=www.mydomain.com' frameborder='0' allowfullscreen></iframe>
</div>
How do you make a youtube video full-screen width and height but make the video full size and it completely fills up the entire screen even when you resize but I don't want this to have the black bars at all when resizing.
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px; height: 0;
overflow: hidden;
z-index: 1;
}
.video-container .video {
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: fixed;
left: 0;
top:0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
right: 0;
bottom: 0;
}
HTML
<div class="video-container">
<div class="video">
<iframe width="853" height="480" src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Check it out on CodePen for viewport resizing to see the responsiveness. https://codepen.io/rickydam/pen/dzyEoR/left/
Refer to this similar question.
Responsive fullscreen youtube video with no black bars?
This article sums up embedding a responsive Youtube video using CSS.
https://avexdesigns.com/responsive-youtube-embed/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
</div>
I'm trying to embed a video using an iframe but I'm getting some annoying overflow padding that I can't seem to get rid of.
The code at the top is a way of forcing an iframe into a responsive style so that you can view it on mobile.
Basically the 'padding-bottom' code is controlling the aspect ratio of the frame.
I got the code from here:
https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
I've checked here: Making responsive iframe and this leaves me with horrible overflow too.
The result is below:
Image displaying overflow issue
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
Changing the padding-bottom: to 56.35% just moves the black overflow line to the bottom of the video instead of the side.
height 100vh will take 100% of viewport and margin:0 and padding:0 remove default properties.
Just add
.video-container {
position: relative;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%; /* Add this */
height: 100vh; /* Add this */
padding:0px; /* Add this */
margin:0px; /* Add this */
}
.video-container {
position: relative;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100vh;
padding:0px;
margin:0px;
}
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
I just did this instead. It works - gets around the user agent style sheet that Chrome uses and applies correct styling.
<style type="text/css">
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
border: 0;
overflow: hidden;
}
</style>
<div class="video-container">
<video style="width:100%;" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" controls autoplay type="video/mp4"></video>
</div>
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
I embedded a responsive youtube video with bootstrap.
My aim: keep it's max size width="560" height="315" which is then centered.
How it should be: https://avexdesigns.com/responsive-youtube-embed/
But instead it goes beyond these limits, making the video very blurry.
How it should not be: https://bomengeduld.github.io/mos-man2/
So far I tryed to set max-width & max-height in css, but it only adjusts the width.
What Am I Doing Wrong in this Code? Thank you in advance for clearing this up!
If understood it correctly you want something like this:
#embed {
height: auto;
text-align: center;
background: black;
width: 100%; /* new */
max-width: 560px; /* new */
margin: 0 auto; /* new */
}
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe, .videowrapper object, .videowrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
<section id="embed">
<div class="container-fluid videowrapper">
<iframe src="https://www.youtube.com/embed/g42lHnzOeVs" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>
</div>
</section>
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