How to set this specific code into sections - html

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>

Related

Youtube embed not working

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>

youtube video screen black bars scenario

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>

How to prevent Iframe video go beyond max-width & max-height?

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>

Center an iframe for desktop and mobile

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

Force a div to "float" next to iframe?

I'm working on a responsive site and recently manage to get a vimeo clip to become responsive by using the embed code at http://embedresponsively.com/.
Only problem is that when ever I try to get a div to float next to the embedded iframe the Vimeo movie disappears? And the div wont display next to the iframe within the wrapper neither.
Does someone know how to force a div to display next to (to the right) a iframe without using float or inline-block since that won't work(?) and at the same time keeping the scaling/responsive effect of the vimeo-movie?
Thank you in advance!
HTML:
<body>
<div class="case_wrapper">
<div class="movie_wrapper">
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/18085160' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>
</div>
<div class="movie_info"></div>
</div>
</body>
CSS:
.case_wrapper {
width:1200px;
height:500px;
background:#5340AA;
}
.movie_wrapper {
max-width:860px;
max-height:500px;
}
.movie_info {
width:300px;
height:500px;
margin-left:40px;
background:#53FF00;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You just need to add width: 100% to .movie_wrapper and then you just add float: left to .movie_info and .movie_wrapper and it will work. The issue why the video was missing when you added float left is because the video didn't had a width, you just had a max-width to it and with float left it didn't get the width (the .movie_wrapper had width: 0 and height: 0), so you need width: 100% so it can spread ( or to have a width) and then just add max-width to it.
Working example here http://jsfiddle.net/ugpdz7qu/
.case_wrapper {
width:1200px;
height:500px;
background:#5340AA;
}
.movie_wrapper {
width: 100%;
max-width:860px;
max-height:500px;
float: left;
}
.movie_info {
width:300px;
height:500px;
margin-left:40px;
background:#53FF00;
float: left;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}