I have a website grid that I am working on that shows new announcements and blog posts. I have one large column (col-sm-8 that spans 2/3 of the page) that I wish to have an introductory video (explaining/showcasing work) fitting.
I cannot seem to get a video to play nicely as the background for this (trying with YouTube embeds and a couple tutorials around the internet) I have created an image to explain this better below:
Any help, or just a shove in the right direction would be super appreciated!
Thanks
updated image for better scale:
You won't be able to get a youtube video, or any video to display nicely inside that region, so I suggest you resize the room you have allocated for the video to a better size for the video
Here is a responsive youtube embed code. The width and height were given by youtube. You need to come up with the rest of how you want your page to be.
/* 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 width="560" height="315" src="https://www.youtube.com/embed/FSvNhxKJJyU" frameborder="0" allowfullscreen></iframe>
</div>
Related
Im making my first web app and im trying to put some iframes with youtube videos on it, the thing is, when i pasted the embed code from youtube, it was too big to the point that it took the entire screen, so i resized it. But now the interface is too big for the size and looks bad. How can i make the interface adaptive to the size? pic related
Thank you.
You have to use responsive styling. For this you need an extra div as wrapper. With next html and css, the youtube will be as wide as the available space (in this css 90% of the available space). Ofcourse both width and height will resize to maintain the 16:9 ratio of an youtube movie.
<style>
.yt {
position: relative;
display: block;
width: 90%; /* width of iframe wrapper */
height: 0;
margin: auto;
padding: 0% 0% 56.25%; /* 16:9 ratio */
overflow: hidden;
}
.yt iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8Pa9x9fZBtY" allowfullscreen></iframe>
</div>
you can but it inside parent container which will control it's size and make the size of your iframe 100%
look here:
Make Iframe to fit 100% of container's remaining height
I am trying to embed a video from YouTube into my site. I am wondering if there is a way to relate the width and height based on the window size. For example, on an iPhone it looks something like THIS. Can I make the video shrink in width to smaller than the display size? Can I tie in my responsive site somehow, to get that?
It works great on computers or other larger screened devices, but not mobile.
Source:
<center><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe></center>
Full page source
Thanks for the help!
[edit: source]
It is possible to embed Youtube videos responsive by overriding the Youtube style (CSS).
Add the following CSS:
.video-con {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-con iframe,
.video-con object,
.video-con embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
And then wrap the iframe with div:
<div class="video-con">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
I seem to have the opposite problem of everyone else with iframes and scrolling. I need the iframe (contains a youtube video) to NOT prevent scrolling of the main document. If I hover my mouse over it, the page won't scroll with the scroll wheel, and according to the latest chrome canary simulation of touch devices, I can't put my finger on the frame and scroll the main document either. Any way to stop this? My CSS is below:
.GalleryVideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
width:95%;
margin:auto;
display:block;
}
.GalleryVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The question is unclear, so I went into some detail below on various ways to achieve this effect and how it works.
If you don't need to interact with the iframe, the quick and dirty solution is to use pointer-events: none;. This will put the iframe on the page, and not allow it to scroll. However, it also does not allow you to click on it. This obviously won't work for a YouTube video, but it is important to know this is an option.
If you need to interact with the iframe, either to play a video or click a link, all you need to do is make sure the iframe is large enough to display the full contents. I'm unsure what specific problem OP was encountering as we don't have their HTML, but if you scroll and the iframe is not also trying to scroll, it will not prevent the parent from scrolling.
Basically, if you have your cursor over an iframe and you scroll, the iframe will receive the event first. If it does not need to scroll (either it can't or it has already reached the bottom of the iframe) the event will be propagated to the parent.
Finally, if you have an iframe that you need to be scrollable, but you want to scroll the parent while the cursor is on the iframe, you are out of luck. There is no way to inform the iframe that sometimes the user wants to scroll the whole page. This is simply how iframes work. You can either remove the cursor from the iframe to scroll, or scroll to the bottom of the iframe and continue down the page.
Using a YouTube video and the CSS in the question, I've included a demo for you to see. I also included two identical iframes that are scrollable and applied pointer-events: none; to one to demonstrate how it works.
.tall {
height: 1500px;
}
.GalleryVideoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
width: 95%;
margin: auto;
display: block;
}
.GalleryVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scrolling-iframe {
margin-top: 35px;
display: inline-block;
height: 500px;
}
.no-scroll {
pointer-events: none;
}
<div class="tall">
<div class="GalleryVideoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hzB53YL78rE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<iframe class="scrolling-iframe" src="https://www.wikipedia.org/" frameborder="1"></iframe>
<iframe class="scrolling-iframe no-scroll" src="https://www.wikipedia.org/" frameborder="1"></iframe>
</div>
There used to be a scrolling attribute, but it is deprecated in html5. try this:
iframe {
overflow: hidden;
}
Don't forget to set your width and height somewhere!
If you wanted to try the iframe scrolling attribute, you could like this:
<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>
See working example here:
http://jsfiddle.net/4dt4zhwt/1/
I had horizontal-scrolling disabled like so:
html, body {
overflow-x: hidden
}
On a page with an iframe, if I tried to scroll the page vertically by touching and moving the iframe on Safari for iPad or iPhone, I couldn't.
This fixed it for me:
* {
-webkit-overflow-scrolling: touch
}
I don't know if you have found a way around this, but I had the same problem where all iframes (twitter, facebook and youtube) in my site was preventing the page itself from scrolling. After a lot of debugging and coffee, I found it, in my case at least, It was down to an overflow-x: hidden hidden I had set on a form element 4/5 parents up. Removing the overflow property fixed the issue for me, Hope it works for you!
I had an iframe in full width (with a Vimeo video inside) and it prevents the page scrolling.
Here is how I solved this issue :
<div class="video">
<iframe src="path-to-video"></iframe>
</div>
.video iframe {
pointer-events: none;
}
More info on this css property : https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
I wanted to make a Tumblr theme with various post widths to choose from, setting video posts up has been quite difficult because of this.
This code:
.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%;
}
and
{block:Video}
<div class="video-container">
{Video-500}
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
works flawlessly with YouTube videos, but it trims down Tumblr hosted videos.
Latest default Tumblr theme Optica has something that makes this work, meaning Tumblr hosted videos stay of their original height, but I don't know what... Could anyone help with this? Not necessarily the same way this works in Optica theme, just... Any way?
Sadly Tumblr doesn't seem to follow a specific aspect ratio for its videos, unlike Youtube.
padding-bottom: 56.25% gives you an aspect ratio of 16:9 (http://css-tricks.com/fluid-width-youtube-videos/).
Each Tumblr video may have a different aspect ratio, so each one will need a different padding-bottom value.
Simplest solution would be to use fitVids.js:
jQuery version: http://fitvidsjs.com/
Javascript version: https://github.com/rosszurowski/vanilla-fitvids
You can roll your own, the source of either version explains pretty well what is needed to make the calculation.
Enable Tumblr Videos with Fitvids.js
The src is a little different for videos host by Tumblr. They do some javascript magic.
$(".videos").fitVids({ customSelector: "iframe[src='about:blank']"});
I’m currently working on a site that shows a fullscreen video using vimeo’s player api. problem is, depending on the browser window dimensions I get black bars, clearly because of the discrepancy between the window and video ratios.
I’ve tried quite a few css and js combinations, including but not restricted to the usual go to solution for responsive videos, fitvids, but all to no avail.
my question is, then: is a fullscreen responsive video with vimeo’s embedded player possible or is it better to drop that and build a custom player myself, using vimeo only for hosting the video files?
in case it helps, here’s the relevant code:
HTML
<div id="video”>
<div id="video-container">
<iframe id="main-video" src="//player.vimeo.com/video/123456789?portrait=0&title=0&badge=0&byline=0&autoplay=1&color=333&api=1&player_id=main-video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
CSS
#video {
position: fixed;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#video-container {
position: fixed;
min-width: 100%;
min-height: 100%;
}
#main-video {
position: fixed;
min-width: 100%;
min-height: 100%;
}
thanks in advance!
I don't think there is a way you can do this with css alone just yet (object-fit will probably work when it's implemented in other browsers). I'm not even sure that will work with our iframe anyway.
I think no matter which option you go with, you'll have to know the aspect ratio of the video and explicitly set the size to be larger than the window, and set the positioning to center it.