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
-->
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>
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 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 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>