I need to make a youtube iframe responsive and also that the iframe is left floating to add content to the right, I tried with this code but the iframe is not responsive?
Thanks.
The JSFiddle : http://jsfiddle.net/94150148/vh04d7y2/
.videoWrapper {
position: relative;
padding-bottom: 51.44%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box1 {
float:left;
width: 400px
}
<div class="box1">
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6apL89xgbR0"
frameborder="0" allowfullscreen></iframe></div></div>
<div class="box2">Some text</div>
I will suggest to use Bootstrap for making embedded videos responsive which are added through iframe, following is the code which you can use to make the iframe responsive
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
But make sure to add bootstrap.css and and other bootstrap dependencies.
All you need is max-width:
.left {max-width: 400px;}
Related
I'm trying to create a responsive code to get the best of both worlds from iframes and HTML 5 video with clickable links. In my set up I want to write an inline #media query to play only the Iframe when bigger than 375px and if smaller than 375px to play HTML video in the same div block item white
I'm getting stuck on how to display hidden and instead show <video>
and my boss is convinced this is the way he wants to do it :S
#media only screen and (min-width: 375px) {
div.video {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
}
div.video>iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="item white">
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TIB3q68ZHYw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="item white">
<a href="https://www.walmart.com">
<video width="100%" height="100%" loop autoplay muted preload="metadata"> .
<source src="https://player.vimeo.com/external/274117996.sd.mp4?
s=d8982e09554557a0a5db18f8c5d450252fbcddbc&profile_id=165"
type="video/mp4" />
Your browser does not support the video tag. I suggest you upgrade
your browser.
</video>
</a>
</div>
In css, (min-width:500px) means that anything above 500px will trigger the css below that. If you instead say (max-width:500px), that means anything below 499px will trigger the css under that. For example:
/* This will effect the class as long as the screen width is > 500px */
#media (min-width:500px) {
.myContent {
display:none;
}
}
/* This will effect the class as long as the screen width is < 500px */
#media (max-width:500px) {
.myContent {
display:block;
}
}
Does this help a little bit?
One approach is (as you've noted) to combine the elements under one containing div and hide/show the content respectively (although the containing div here is moot). So with each breakpoint being reached, the iframe will be hidden and the video shown (and vice versa).
I couldn't get your mp4 file to play, so I've substituted it with an example as this may have impacted your effort and those of other responders...
Simple CSS:
#media only screen and (min-width: 375px) {
#iframe {
position: absolute;
height: 0;
padding-bottom: 56.25%;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video {
display: none;
}
}
#media only screen and (max-width: 375px) {
#video {
display: block;
}
#iframe {
display: none;
}
}
HTML:
<div class="item white">
<div id="iframe">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/TIB3q68ZHYw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="video">
<video width="100%" height="100%" loop autoplay muted preload="metadata">
<source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
type="video/mp4" />
Your browser does not support the video tag. I suggest you upgrade
your browser.
</video>
</div>
</div>
You can find this code working in a fiddle here:
http://jsfiddle.net/zh2b0n1e/
You will need to adjust the CSS styling elements to suit your needs (padding, width, borders etc) and improve the HTML, but this method is a simple way of achieving your goal.
I am trying to pull some videos from Vimeo with Vue and the component markup is this:
<div class="vimeo-data">
<div class="video-wrap" v-for="video in videos" v-bind:key="video.name">
<h2>{{video.name}}</h2>
<figure v-html="video.embed.html" class="video-container"></figure>
</div>
</div>
In my understanding, this should generate a HTML similar to this (which it does).
<div class="vimeo-data">
<div class="video-wrap">
<h2>The video name</h2>
<figure v-html="video.embed.html" class="video-container">
<iframe src="https://player.vimeo.com/video/249865075?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0" width="1920" height="810" frameborder="0" title="Academia Titi Aur - Macadam" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>
</div>
<div class="video-wrap">
<h2>Another video name</h2>
<figure class="video-container">
<iframe allowFullScreen frameborder="0" width="100%" height="564" mozallowfullscreen src="https://player.vimeo.com/video/249865062" webkitAllowFullScreen></iframe>
</figure>
</div>
<div class="video-wrap" >
<h2>Some video name</h2>
<figure class="video-container">
<iframe src="https://player.vimeo.com/video/249226102?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0" width="1920" height="1080" frameborder="0" title="6 PLIN intro" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>
</div>
</div>
I made a test and created a static html page with what is being generated by Vue and although the css is the same (below) the videos in the static html are nice and responsive (https://jsfiddle.net/4q5Lyn97/) while the ones generated by Vue are not responsive, they seem cut - see the image below.
.vimeo-data {
position: relative;
top: 70px;
}
embed,
iframe,
object {
max-width: 100%;
}
.video-wrap {
padding-top: 2em;
max-width: 98%;
margin: 10px auto;
clear: both;
}
.video-container {
position: relative;
padding-bottom: 42.18%;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
What can be the cause of this behavior?
I would like to have a footer in my page and I have the following code
<div class="container">
<div class="row">
<iframe id="iframe" width="100%" height="100%" src="http://www.selitera.com" style="border: 0; top:0; left:0; right:0; bottom:0; width:100%; height:100%" />
</div>
<div class="row">
Some footer text
</div>
</div>
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}
.container {
height: 100%;
width: 100%;
display: block;
}
https://jsfiddle.net/6fqcnmaj/
I would like to load my footer on the page always and have the available space for the iframe above the footer?
Any pointers to do this?
You have to add the closing </iframe> tag
https://jsfiddle.net/6fqcnmaj/1/
i have try to do some changes in your code and i found that when you added iframe tag it wasn't closed that's why your footer wasn't appearing. this is an example how we write Iframe tag. Have a look.
And i'm adding a solution screenshot. please have a look.
This image is a solution of your question please look at the red border in bottom right side.
I need to cover the html5 background video with black responsive layer with some opacity (let's call it "shadow layer"). Unfortunately, I can't pick a height of the video layer, because it has to be absolutely positioned, so it is not possible to pick the height of parent div.
Any advices? JS is absolutely not welcome.
Here is the code:
html
<div>
<div class="shadow-layout">
<div class="content">
Some content
</div>
</div>
<div id="video-bg">
<video class="video-bg" autoplay loop poster="">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
</div>
</div>
css
.shadow-layout {
height: 100%;
width: 100%;
position: absolute;
background: rgba(0,0,0,0.5)
}
.content {
margin-top: 40px;
text-align: center;
color: white;
}
#video-bg, .video-bg {
width: 100%;
}
...and jsfiddle
Try changing your css to this...
.shadow-layout {
height: 100%;
width: 100%;
position: absolute;
background: rgba(0,0,0,0.5)
}
#video-bg, .video-bg {
width: 100%;
height:100%;
position:absolute;
}
And you should close your source tag... Change your html to this...
<div>
<div class="shadow-layout"></div>
<div id="video-bg">
<video class="video-bg" autoplay loop poster="">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"/>
</video>
</div>
</div>
Working JSFiddle here http://jsfiddle.net/DivakarDass/k7cqprLz/1/
Hope you asked for a background for that video like this.
Cheers.
I'm using boostrap 3, I'm trying to embed a presentation on the page. Its not the only element on the page. There are many other rows above & below this:
<div class="row">
<div id="iframecontainter" class="col-lg-6 col-md-6 col-sm-offset-1 col-md-offset-1">
<iframe src="http://docs.google.com/gview?url=http://example.com/presenation.ppt&embedded=true" frameborder="0"></iframe>
</div> <!-- #iframecontainter -->
</div> <!-- .row -->
& css:
iframe{
width:100%
}
Above codes are taking care of width as I want. But its the height that is causing the problem. Is there a way I can set height: %of available screen size? or otherwise what is the solution?
Try this -
html, body{ height: 100%; }
.row, #iframecontainter{height: 100%; }
iframe{
height:80%; border: 1px solid red;
}
Fiddle
Using javascript to assign a height of iframe tag.
<script type="text/javascript">
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height= the_height;
}
</script>
<iframe width="100%" src="./1BA3A.mht" scrolling="no" id="the_iframe" onLoad="calcHeight();" height="1px" frameborder="0" ></iframe>
Thanks.