I'm trying to embed a responsive iframe with a Vimeo video into my website. The issue is, when I load the page, the iframe is too short so it cuts off the video's timeline, pause and play buttons like so:
Previously, I had a margin-top:4.6em; applied to the iframe in my CSS to push the next container below the view, which I removed as I thought it could be the issue. It solve the height problem on the offline site, but the online version still does it.
(offline site)
I'm running it on Google Chrome and my code looks like this:
<div class="row">
<div class="col-md-5 offset-md-4 col-xs-10 offset-xs-1 text-xs-center">
<div class="embed-responsive embed-responsive-16by9">
<iframe height="100%" class="embed-responsive-item" src="https://player.vimeo.com/video/168167917" allowfullscreen></iframe>
</div>
</div>
</div>
and this is my CSS (although, not very relevant):
body {
background-image: url(/img/pic.jpg);
background-size:cover;
background-repeat:no-repeat;
padding-top:70px;
}
.footer {
margin-left:1em;
color:#000000;
font-size:1.5em;
-webkit-text-stroke:.5px #000000;
}
I'm using Bootstrap 4.0.0 Alpha 5 from the current maxCDN, Google and netdna CDNs. Can anybody help me?
Related
I have a fixed background video and I used the embed-responsive class to have responsiveness on it. The problem is that the fixed position flow out of the container the video. I first think of adding a margin-top on my sectionone in order to push my content under the video but it wouldn't work on responsivity. So I turning around without any idea to fix it.
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" frameborder="0" width="660" height="371" allowfullscreen="" src="https://www.youtube.com/embed/pUjE9H8QlA4?feature=oembed">
</iframe>
</div>
<div class="sectionone">
<div class="row">
<h3>CONTACTS</h3>
<div class="col-sm-12 col-md-4 ">
<h2>Prénom Nom</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
<p>Learn More »</p>
</div>
<div class="col-sm-12 col-md-4 ">
<h2>Prénom Nom</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
<p>Learn More »</p>
</div>
<div class="col-sm-12 col-md-4 ">
<h2>Prénom Nom</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
<p>Learn More »</p>
</div>
</div>
</div>
</div>
I'd recommend a javascript approach.
(function($) {
$(document).ready(function() {
var iFrame = $('iframe.embed-responsive-item'),
sectionOne = $('.sectionone');
$(window).resize(function() {
var _frameHeight = iFrame.height();
sectionOne.css('margin-top', _frameHeight + 'px');
}).trigger('resize');
//the timeout below can help with unpredictable network or browser speeds
setTimeout(function() { $(window).trigger('resize'); }, 1000);
});
})(jQuery);
The code above will give you the basics of what you need to do which is wait for the iframe's height to become something that can be determined by jQuery and then applying it to the section that you want to push down. There is no way, that I can think of, to do this with CSS if you are trying to have the video position fixed and the rest of the page content position relative or static.
https://jsfiddle.net/5f0d8L1w/
(the js fiddle does not have the responsive iframe but should demonstrate how to intermingle fixed and relative positioned elements using your html).
I just copy the embed code from the youtube videos and I need to use the youtube vidoes for advertisements
code from youtube
<iframe width="350" height="260" src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
I have edited and updated the code and it looks like this
<div class="video">
<iframe src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
</div>
I have written my CSS and seems it does not have any effect on the Size of the YouTube on web page
CSS
.video{
width:67px;
height:80px;
}
As i increase the size the video stays normal.How to re-size the videos to look big in size?
You want to change the size of the iframe INSIDE the div with class 'video' so:
.video iframe {
width:67px;
height:80px;
}
you have to define class in iframe tag then that css will take effect
<iframe class="video" src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
<style>
.video{
width:67px;
height:80px;
</style>
I'm working on a lightbox where I'd like to do as much as possible in CSS.
I'm using viewport units to make the whole thing responsive.
Unfortunately IE (I've tested it in version 11) doesn't resize dynamically loaded images properly.
Compare the following jsfiddle's and resize your browser to see what I mean.
Static image
<div class="lightbox lightbox--active">
<div class="lightbox__inner">
<div class="lightbox__content" data-lightbox-content="">
<img src="path/to/image">
</div>
</div>
</div>
Dynamically loaded image
<div class="lightbox lightbox--active">
<div class="lightbox__inner">
<div class="lightbox__content" data-lightbox-content="">
<!-- Image loaded with JS -->
</div>
</div>
</div>
Any thoughts on how to work around this?
IE10+ has been weird with the width and height attributes (which seem to be added automatically in this case), so we'll override them:
.lightbox .lightbox__content img {
...
width: auto;
height: auto;
}
Demo
I am creating a grid like layout of articles and videos for my home page. I want all boxes to be the same dimensions including the video ones, but i have some questions about adding youtube videos to my site.
question 0: I herd HTML 5 supports video but I am considering embedding YouTube videos as most of my videos are from YouTube and I herd that HTML5 video isnt supported well enough? Should I consider HTML5 video?
question 1: Considering YouTube videos, how do I add YouTube videos into my HTML and CSS?
question 2: How can I make sure that the video fits inside my markup and not any smaller or bigger.
question 3: How can I also make sure that the user can have access to the same video controls thar YouTube provides, eg fullscreen, play, ect.....
I will also take any advice on my HTML and CSS.
Heres the HTML for the grid like articles and videos for my site:
<div class="modules-container">
<h3 id="on-god">On God</h3>
<div class="row clear-fix">
<section class="article-module">
<header>
<h4>
Article Name
</h4>
</header>
<blockquote cite="articles/name">
<p>
<em>My example quote will go here</em>
</p>
</blockquote>
<footer class="article-module-footer">
Read More
</footer>
</section><!-- end .article-module -->
<section class="article-module middle">
<header>
<h4>
Article Name
</h4>
</header>
<blockquote cite="articles/name">
<p>
<em>My example quote will go here</em>
</p>
</blockquote>
<footer class="article-module-footer">
Read More
</footer>
</section><!-- end .article-module -->
<section class="article-module">
<header>
<h4>
Article Name
</h4>
</header>
<blockquote cite="articles/name">
<p>
<em>My example quote will go here</em>
</p>
</blockquote>
<footer class="article-module-footer">
Read More
</footer>
</section><!-- end .article-module -->
</div><!-- end .row -->
<hr>
<h3 id="videos">Videos</h3>
<div class="row clear-fix">
<section class="video-module">
<h4>
Name of video
</h4>
<p>
My embeded video will go here
</p>
</section><!-- end .video-module -->
<section class="video-module">
<h4>
Name of video
</h4>
<p>
My embeded video will go here
</p>
</section><!-- end .video-module -->
<section class="video-module">
<h4>
Name of video
</h4>
<p>
My embeded video will go here
</p>
</section><!-- end .video-module -->
</div><!-- end .moduels-container -->
</div>
And my CSS thus far. I should note Im using normalize.css in another file.
/*
Author: David Espejo
*/
/* rem is base off of root font size */
/*
Padding and borders are
included in the width
of all elements
*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Small screens (default) */
html { font-size: 100%; } /* root font size 16px */
/* Medium screens (640px) */
#media (min-width: 40rem) {
html { font-size: 112%; } /* root font size 17.92px */
}
/* Large screens (1024px) */
#media (min-width: 64rem) {
html { font-size: 120%; } /* root font size 19.2px */
.article-module, .video-module {
float: left;
width: 30%;
padding: 0.3rem 0.5rem;
}
.article-module.middle, .video-module.middle { margin: 0 5%; }
}
.container {
margin: 0 auto;
max-width: 48rem; /* not > (48 * 19.2 = 921.6px)! */
width: 90%; /* when < 921.6px */
}
.row { border: 1px solid blue; }
.article-module, .video-module { border: 1px solid red; }
.clear-fix:after {
content: " ";
display: block;
clear: left;
}
Answer 0: I would suggest to go with embedded videos since you are mostly using youtube videos. That way you wont have to worry about the controls for the video.
Answer 1: You can take the embed code provided by the youtube and drop it anywhere you want to in your HTML.
<iframe width="560" height="315" src="//www.youtube.com/embed/PKa6XdWat2s" frameborder="0" allowfullscreen></iframe>
In your case this iframe tag would go wherever you have mentioned "My embeded video will go here"
I would also suggest using a div tag instead of p to contain the videos. As far as I know p tag is used for paragraphs of text.
Answer 2: You can make sure the video fits inside your grid by controlling the width and height of the iframe tag from the stylesheet.
Something like this.
.iframe {
width:100%;
height:100%;
}
By doing this the video size will be the size of the containing div.
Answer 3: As I mentioned above the controls should already be there for you.
fiddle link : http://jsfiddle.net/6vh2t/1/
Your HTML looks pretty good. I'd maybe use <article> rather than <section>, that seems to be more appropriate.
You can get the embed code for any video by clicking share then embed. Youtube used to use <object> but now it seems to be <iframe>, e.g.
<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
You can set the width and height (in pixels). Check the documentation to see about controls.
https://developers.google.com/youtube/player_parameters
Good luck. Cheers!
For youtube videos you can insert them as an iframe, like this:
<iframe width="420" height="315" src="//www.youtube.com/embed/fvdmISdytXg" frameborder="0" allowfullscreen></iframe>
Where src is the source of the video, also you can customize the width and height.
I have following webpage:
<div id = "wrapper">
<div id="leftmenu>
...
</div>
<div id="search">
...
</div>
<div class="Container">
<div id="content">
<iframe id="iF" name="if" src=""></iframe>
</div>
</div>
</div>
It bascially shows the menu in the left search bar on top and iframe with content below search bar and next to the menus. Problem i am having is i dont want it to show vertical and horizontal scrollbars inside ifram but rather use browsers scrollbars.
if i set like this in css:
.Container
{
position:absolute;
width:100%;
height:100%;
left:180px;
}
It removes horizontal scrollbar but is not removing vertical scrollbar. Can anyone guide me how to remove this vertical scrollbar from iframe.
Try: overflow: hidden; on your iframe.
#content iframe {
overflow: hidden;
}
Try this... After the iframe loads it resizes it using javascript. It'll only work if the iframe src is of the same domain.
<div id = "wrapper">
<div id="leftmenu>
</div>
<div id="search" >
</div>
<div class="Container">
<div id="content">
<iframe id="iF" onload="resize(this)" name="if" src="/"></iframe>
</div>
</div>
</div>
<script>
function resize(elem){
var outer=elem;
var inner=elem.contentDocument.documentElement;
outer.style.border="0";
outer.style.overflow="hidden";
outer.style.height=Number(inner.scrollHeight+10)+"px";
outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
There should be a scrolling attribute for the iframe you can just set to no, that takes care of the scrolling.
The iframe doesn't know it needs to be larger than the page it is in. If you know the height of the page you are attempting to show in the iframe, you can set the iframe height accordingly.
That being said, if the page you are displaying may change in size, your maintenance makes this pointless.
Charlie Frank's answer is good for same domain applications.