I don't have access to my css and would like to embed a responsive YouTube video with in line CSS...
Is this possible? and could you please provide the div snippet?
Thanks
nothing complicated, check this fiddle:
http://jsfiddle.net/gwfttfze/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
edit
(based on first comment)
Use classes that are already defined in your css
<div class="product__video">
<div class="video-wrapper">
<iframe width="560" height="315" src="//www.youtube.com/embed/dfSk1c6SzKw" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
Related
I am trying to embed an iFrame in a content management system which will later act as a preview function when making changes to a page. Trouble is, the iFrame won't change size, and I'm bewildered.
Video link to example: https://www.icloud.com/sharedalbum/#B0b5M7GFPGbX4Tu
How can I make the height responsive to the CSS values I'm entering? What's happening?
try this
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videowrapper">
<iframe width="853" height="480" src="-YOUR-URL-HERE-" frameborder="0" allowfullscreen></iframe>
</div>
I tried to change this iframe size -
<iframe src="http://gombit.net/plugins/mediaplayer/site/_embed.php?u=74Y" frameborder="0" scrolling="no" webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"></iframe>
, but it don't woking. I want make responsive.
Try as below.
<iframe src="http://gombit.net/plugins/mediaplayer/site/_embed.php?u=74Y" frameborder="0" scrolling="no" webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true" height="300" width="100%"></iframe>
In small device media make height auto.
Wrap iframe in a block element, set the iframe as absolute and the block relative. Details in Snippet:
SNIPPET
.frm {
position: relative;
height: 0;
padding-bottom: 56.25%;
width: 100%;
max-width: 100vw;
}
iframe {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<figure id='F1' class='frm'>
<iframe id='I1' name='I1' src='http://gombit.net/plugins/mediaplayer/site/_embed.php?u=74Y' frameborder='0' scrolling='no' allowfullscreen width='100%' height='100%'></iframe>
</figure>
Wow it looks cool and it has no trouble complying with resize, nice.
First of all, the video is kinda scaled and I'd love it to fit in the whole screen. Besides that, I can't figure out how to make video responsive on all screen sizes.
HTML
<div class="spread-video">
<video src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" autoplay="" loop="">
</video>
</div>
CSS
.spread-video {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
Does anybody know how to achieve this? Thank you in advance!
Target the <video> instead of the parent div, see fiddle: https://jsfiddle.net/m1pz6zcu/4/
.spread-video > video {
width: 100%;
}
Since the aspect ratio of the video is different from that of the view port, a work around for the issue is to make the video width bigger then the viewport width, center it and hide the overflow. See fiddle: https://jsfiddle.net/m1pz6zcu/6/
.spread-video > video {
width: 200%;
margin-left: -50%;
}
.spread-video{
overflow: hidden;
}
Add the following css
.spread-video video {
width:100%;
}
https://jsfiddle.net/mlegg10/fsftz8rt/4/
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</div>
Try this
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
padding-top: 25px;
or this one
position: absolute;
width: 100%!important;
height: 100%!important;
I have a problem with youtube iframe videos. I want the iframe to take up the 100% width of the page and maintain aspect ratio on mobile devices. I do not want the video to get bigger than its 560 width or 315 height. I then want the 2 videos to be displayed inline-block on a tablet and for the desktop. I want the iframes side by side on a tablet and desktop. I can't seem to figure this out. I have exhaustively searched this and can't find an answer that works. Here is my code.
HTML
<div class="video_responsive">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9_zGXEmNKPo" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/zEI8CT7cElQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
.video_responsive{
padding-left: 1em;
padding-right: 1em;
}
.video-container{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
margin-top: 20px;
height: 0;
overflow: hidden;
}
.video-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Any help would be appreciated. I am doing this for a class. Professor has no idea how to fix this problem. Thanks
Update 2
OP mentioned an interest in tables. Although they can make a layout simple, it's not meant for layout, they're meant to represent data. Fortunately, there's are several display values that allow an element to behave like a table. On both demos, when in desktop mode, the posters (images displayed when video is idle) overlap and are distorted, but the video isn't.
The most important ones are:
table element will behave like <table>
table-row element will behave like <tr>
table-cell element will behave like <td>
Here's an article with tips on how to use display: table
This Plunker is using display: table/table-cell
Update 1
The code editor on this site isn't good for complex CSS so I moved the demo over to Plunker
Summary
2 major properties in use are:
media query
flexbox
Mobile mode 758px or less in width for viewport
flexbox layout is stacked (flex-flow: column nowrap)
Desktop mode 759px or more in width for viewport
media query triggers at 759px or more
flex-flow is now row nowrap
Use media query:
#media only screen and (min-width: 759px) {
.video_responsive {
display: table;
}
.video-cpntainer {
display: table-cell;
max-width: 45vw;
}
.video_responsive {
padding-left: 1em;
padding-right: 1em;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
margin-top: 20px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media only screen and (min-width: 759px) {
.video_responsive {
flex-flow: row nowrap;
}
.video-container {
min-width: 380px;
max-width: 48vw;
min-height: 214px;
max-height: 27vh;
}
}
<div class="video_responsive">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9_zGXEmNKPo" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/zEI8CT7cElQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
In your CSS set max-width: 759px; for your iframe.
Can i overlap an iframe using a div so it is not clickable?
This is what i have (and doesn't work in Firefox)
Here is the HTML code:
<div class="container">
<div class="do-not-allow-click"></div>
<div class="iframe-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/T4-PSYiYUzQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
And these are the CSS rules:
.container {
position: absolute;
top: 0;
left: 0;
height: 315px;
width: 420px;
}
.do-not-allow-click {
cursor: move;
height: 100%;
top: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9999;
}
.iframe-container {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
When you embed a youtube link in an iFrame, the default wmode is windowed which apply a z-index greater then everything else and get overlay at the top.
To solve this append wmode=opaque to the source URL like this
http://www.youtube.com/embed/T4-PSYiYUzQ?wmode=opaque
So your iframe code will be as below
<iframe width="420" height="315" src="http://www.youtube.com/embed/T4-PSYiYUzQ?wmode=opaque" frameborder="0" allowfullscreen></iframe>
Check this: overlay opaque div over youtube iframe