I'm trying to embed Rumble videos into my site dynamically, that part is working great. However, I can not get the video to take up the full space available unless I specify the width and height of the iframe itself. I have it set to max-width:1000px;width:100%;height:auto;margin:auto; and the player itself takes up the full width as it should but, the video stays small. Nothing I do seem to work... Any Ideas?
(source: thewoodlands.biz)
Found a solution that worked. Just replace the asp classic code in the src string with whatever. Enjoy!
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="videoWrapper"><iframe src="<%= url-link %>" frameborder="0" allowfullscreen></iframe></div>
Related
Tried different method to customise(hide YouTube title,logo etc). But still not working. My goal was to hide the title top bar primarily. So looking for some guidance if this is possible at the current time?
*Tried css method,iframe viewport method and some other
Well, there is a solution since youtube deprecated the parameter showinfo, you can use html and css.
First, you have to put the youtube iframe in a div:
<div class="frame-container">
<iframe></iframe>
</div>
Next, you must increase the size of the frame so that it is outside the browser window, and then align it in the centre, since youtube only tries to centre the video and keeps its logos on the sides, this trick should work.
.frame-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
width: 300%; /* enlarge beyond browser width */
left: -100%; /* center */
}
.frame-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
and finally, to prevent everything from stretching because of the size, you put it inside a wrapper.
<div class="wrapper">
<div class="frame-container">
<iframe></iframe>
</div>
</div>
.wrapper {
overflow: hidden;
max-width: 100%;
}
EDIT 1: In case you want to disable suggested video and just allow pause, you have to replace the url with:
In that case, you have to replace the youtube url with:
https://www.youtube.com/embed/VIDEOID?playlist=VIDEOID&loop=1
When the video is looped, the suggested videos will be disabled, and even with the controls disabled you can pause the video by clicking on the video.
I'm working on an open source alternative to Plex and I'm trying to get the in-browser video player to take up as much of the window as possible during playback, but I'm running into some problems. The video player built in to Chrome does exactly what I am trying to do if you simply visit the URL for a video in it and so does the Netflix website. However, I've been unable to get this to play nicely on my site.
I've got the following code right now (JSF with PrimeFaces):
div.video-container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
.expanded-video {
padding: 0;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;">
<p:panel header="#{rawPage.getTitle()}" styleClass="ui-noborder video-container">
<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="#{rawPage.getUrl()}" type="#{rawPage.getMimeType()}"
width="auto" height="auto" preload='metadata' controls='' autoplay='' autofocus='' class="expanded-video" >
</video>
<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
</p:panel>
</div>
The problem is that I can either get it to fill the window horizontally or vertically, but if I resize the window, then the video extends beyond the edge of the screen. For example:
the bottom is cut off:
same video, window resized (this behavior is right):
What chrome does if I visit the url for an mp4 file (fits perfectly, nothing cut off):
I know that I can receive window resize events with javascript and set the height and width like that, but I'm looking for a pure HTML+CSS solution to this problem that lets me keep the div at the top showing the title of the movie. (Project already has Twitter Bootstrap)
Edit
The dom looks like this once it's rendered by JSF:
<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;"><div id="j_idt6" class="ui-panel ui-widget ui-widget-content ui-corner-all ui-noborder video-container" data-widget="widget_j_idt6"><div id="j_idt6_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Big Buck Bunny</span></div><div id="j_idt6_content" class="ui-panel-content ui-widget-content">
<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="/media/api/raw/downloads/Big Buck Bunny.mkv" type="video/x-matroska" width="auto" height="auto" preload="metadata" controls="" autoplay="" autofocus="" class="expanded-video">
</video>
</div></div>
</div>
It's also worth noting that we aren't trying to support Internet Explorer or Edge and that, while we'd like to support Safari, we're okay if we can't.
Changing the max-width and max-height to 'width' and 'height' sorted it for me.
You basically told the video that it can be any size as long as it's not over 100%;
.expanded-video {
padding: 0;
margin: 0 auto;
width: 100%;
height: 100%;
}
Hmmm, might have understood incorrectly and am unable to test my solution as videos are blocked at work
You can also use this css trick to adjust ratio of video according to width;
.cover {
min-width: 100%; max-width: 100%; object-fit: cover;
}
Detailed Info Here
I am placing video players with playlists iframed on a WP page. I have them wrapped with a div that has responsive css applied both to the div and the iframe with padding-bottom etc. Problem is when viewed on a mobile device the video is not resizing to fit the width of device. I emailed myself direct links to the videos and they loaded/resized correctly, so i know its not the videos.
Here are two pages each having a different version of a video player, one of them is a Youtube player:
http://events.latimes.com/screenings/gallery-test-2/
http://events.latimes.com/screenings/html5-videos-test/
Any help would be immensely appreciated as i've been on this for too long and need to resolve it. Let me know if I can post extra info or any code snippets to be help in troubleshooting.
This worked for me
see on JSfiddle
.video-container {
position: relative;
padding-bottom: 53.2%;
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%;
}
/* avexdesigns.com say use 56.25% above if your video has a 16:9 aspect ratio */
<div class="video-container">
<iframe src="https://www.youtube.com/embed/GA1Nr0SNEYE?rel=0" width="853" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
<!--- Many Thanks to
http://avexdesigns.com/responsive-youtube-embed/
for this solution
-->
I found fluidvids.js and am using that on my site, but it only accounts for width. I have some users who have more of a panoramic, narrow height viewport for their browser, and can't see the controls on my video because the window is so wide (900px) that the video width doesn't scale for the height. I'd like to have responsive height, and have looked at several posts on AListApart, etc, and can't find the obvious solution. Let me know if you have any tips or see the glaring thing I'm missing.
Just learning about CodePen, but my relative links to all the js seems to make that a little complicated (sorry).
Here's the link: http://chrisphoto.com/masters2/index.html#chapter-2
Here you can get some awesome tricks on responsive videos in CSS, youtube iframe too.
For both Vimeo and Youtube videos, wrape the iframe in a div giving it a class "video_wrapper"
.video_wrapper{
margin: 82px auto;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0; width: 80%;
}
.vdo_span iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%; /* Adjust height to your own need */
}
I'm trying to embed video movies but they are not being scaled and look like you-know-what.
In addition I'm unable to post on vimeo.com forums. Google doesn't help as well.
Here's an example, vimeo movies compared to YT ones:
http://jsfiddle.net/LYt3R/
Any ideas?
I have a similar problem. I'm implementing a mobile web site and I want autoscaling, according the screen resolution of visitor device.
This link is interesting: http://webdesignerwall.com/tutorials/css-elastic-videos/comment-page-1
And this one is a complete post:
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
This solution is not perfect but is the better idea I found.
The basic CSS and HTML code is:
.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%;
}
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>