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>
Related
I am not a developer, which I will make painfully clear here:
There are 3 full screen video background elements towards the top of my company website’s homepage (papertown.tv — see the rows titled, 'how it should be,’ ‘your value with replay value,’ and ‘simply, lasting results’), which I cannot for the life of me seem to coerce into scaling down with the viewport. In other words, instead of maintaining their full fields-of-view as the viewport shrinks, they get cropped by their respective rows. It’s to the point where it’s nearly impossible to tell what’s happening in the videos on mobile.
I tried this #media query but it just made the videos float around awkwardly inside the rows:
#media (max-width: 798px) {
#this-is-how-mobile .fl-bg-video,
#your-value-with-mobile .fl-bg-video,
#simply-lasting-results-mobile .fl-bg-video
{
height: 1920px;
width: 1080px;
-webkit-transform: scale(.45);
transform-origin: 0% -27%;
z-index:-1!important;
The site was built on WordPress with Beaver Builder (sorry). But this should be a simple fix, no?
Happy to send some Doge or Ether to whomever helps me solve this.
Many thanks in advance.
You can wrap the iframe with the following html/css and it will scale to fit the size of the container.
CSS
.video-wrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
margin-bottom: 30px;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-wrap">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="https://player.vimeo.com/video/572629737?title=0&byline=0&muted=1&autoplay=1&loop=1&background=1&app_id=122963" frameborder="0" allowfullscreen></iframe>
</div>
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>
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 am trying to embed this video on this virb page: http://www.amytdatta.com (password: tyma)
It's an album pre-release, hence the site password, sorry!
Try as I might, i'm unable to emulate the full window scaling behaviour of the vimeo video page. I've tried putting min-width: 100%, min-height: 100%, max-height: 100% everywhere but my embedded video is taller than the browser window and doesn't scale in the neat way the vimeo page does.
any advice?
The problem lies within your CSS properties.
If you take a look at the following codesegment (base.css, line 208):
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
You will see that you have a padding at the bottom aswell as a defined position. Just delete those two lines, so it looks like this:
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-top: 30px;
}
It'll look like you want it to.