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']"});
Related
I checked for a solution to my little problems but nothing worked so far. Hopefully someone could provide a solution for my two problems.
Doing my website with wordpress and not experienced in html and css .. just started to understand the issue I have.
I want to add ad-banners to my website and these are provided from companies either in JS or iframe. I have problems with both but let's start with iFrame. The problem actually is the banners are not responsive at all and even on preview on Laptop with MDPI screen the banners are already cut off on the right side.
The code:
<iframe scrolling='no' frameBorder='0' style='padding:0px; margin:0px; border:0px;border-style:none;border-style:none;' width='728' height='90' src="https://examplewebsite.world/I?tag=d_565m_79c_&site=565&ad=79" ></iframe>
How I changed it:
<div class="resp-container">
<iframe class="resp-iframe" src="https://examplewebsite.world/I?tag=d_565m_79c_&site=565&ad=79" ></iframe>
Added CSS:
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
(This is an example and used for a youtube video the ratio of 9:16 does not fit for padding-top of 56.25% but I tried others and did not work though)
Would be great if someone has an idea .. providers told me they never had this kind of issues with their banners and are not able to help me.
Thank you in advance :)
P.S. I forgot to mention (don't know if this is important). I am using left and right sidebars 20% each so middle content is 60% of the width and the banners should be displayed in the center.
UPDATE:
The idea behind my attempts so far has been focused on adjusting the iframe container and fixing it based on the intrinsic ratio of the Iframe so that it would then as it responds to change in proportion the contents would also change proportionally. This does not seem to work as some elements of the iframe remain fixed. I would really like to have a responsive Strava Iframe but for some reason cannot figure out to achieve this. I have made a Codepen Collection with current attempts thus far.
I have recently added a shortcode for embedding Strava iframes into my Hugo site (academic theme). On the desktop, devices the iframes render properly and appear to be responsive in browsers, yet on mobile devices, this isn't the case. The issue at hand can be seen on this webpage and my GitHub repo. I would be very grateful for any help in resolving this.
I have been trying multiple tried CSS tweaks and variation recommended on the Hugo forum and on other online sources.
Current Shortcode:
{{ if and (.Get "id") (.Get "hash") }}
<div class="responsive-object">
<iframe height='405' width='590' frameborder="0" allowtransparency='true' scrolling='no' src="https://www.strava.com/activities/{{ .Get "id" }}/embed/{{ .Get "hash" }}"></iframe>
</div>
{{ end }}
Current CSS:
.responsive-object iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-object {
position: relative;
padding-bottom: 67.5%;
height: 0;
margin: 10px 0;
overflow: hidden;
}```
Despite trying to make the iframe container responsive, the same result occurs where it seems responsive on desktop browsers yet not on mobile devices. I am unsure of how to proceed from this point, or if I am missing something.
Do you add <meta name="viewport" content="width=device-width, initial-scale=1.0">
To your <Head> ?
If yes imma gonna edit my post with the solution :)
EDIT
The best article I've found thus far on creating responsive iframes is How To Make Responsive Iframes - It's Easy!.
There are three salient points:
Set no attributes in the iframe opening tag, specifically not width and height
Put a div container around the iframe, and use CSS height: 0; and then padding-bottom: nn%; to give the container a height expressed as the height:width ratio as a percentage.
Style the div inline with -webkit-overflow-scrolling: touch and overflow: auto which are necessary to handle scrolling on mobile devices and are unstable in CSS.
This code works for me:
// HTML (in an embed block, not a code block)
<div class="iframe-container iframe-container-for-wxh-500x350" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="http://www.targetWebsiteURL.com"> <p style="font-size: 110%;"><em><strong>IFRAME: </strong> There is iframe content being displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe>
</div>
// CSS
.iframe-container { position: relative; margin: 5px; height: 0; overflow: hidden; }
.iframe-container-for-wxh-500x350 {
padding: 25px 25px 70% 25px; /* padding-bottom = h/w as a % */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 1px inset #7a8b8b;
/* put following styles (necessary for overflow and
scrolling handling) in div container around iframe
because not stable in CSS
-webkit-overflow-scrolling: touch;
overflow: auto; */
} Use a separate class to style the padding-bottom so that, if you have more than one iframe and they are of differing wxh ratios, all you have to do is code a class for each and set padding-bottom to the different percentages.
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>
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.
This is a tricky question to word correctly, so I created a Fiddle to more accurately represent what I'm trying to do:
http://jsfiddle.net/LAtPJ/
.thumbnailContainer.video_embed
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The above code works perfectly for very nice, responsive YouTube videos. But...
If you imagine this in the context of a media gallery where images and videos should co-exist in a completely responsive design.
There will be rows and rows of media, and there is likely to be a difference in aspect ratio between the images and the videos and so therefore we're left with something that is no longer uniform.
Effectively, the YouTube video should be 100% wide, but it's height should be no taller and no shorter than that of the images. I previously had a version of this that was all fixed widths and heights so quite simply every image and every iframe was 200 x 200. Now, I want something more mobile friendly so although images I have exactly how I need them, videos are not.
Any ideas?
The end solution (if there is one) should preferably be CSS only and not necessarily specific to YouTube (some of the videos will be other services, but mostly rendered via an iframe like YouTube).
You guys are awesome so hopefully you'll come up with something cool. Thank you so much.
100% height is challenging, as you can see here: How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?
Your best bet might be to use jQuery, if that's an option.
You might try giving both the .thumbnailContainer and .thumbnailContainer.video_embed iframe classes a min- and max-height. This is untested on mobile, of course, and I'm not certain how aspect ratio would be affected for non-responsive video embeds. Hope this helps.
DEMO here. Code snippet below:
.thumbnailContainer
{
overflow: hidden;
position: relative;
width: 100%;
min-height: 200px;
max-height: 200px;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 200px;
max-height: 200px;
}
I thought it might be useful to document how I've decided to do this.
#ivarPrudnikov kindly suggested grabbing the YouTube thumbnails from the API. Something I had considered already, but, of course, it doesn't really matter whether the thumbnail container contains an iframe, text, or indeed an image, the same problem exists.
There's no straight forward way of keeping that container the same size as the other containers without there being an image in there of the exact aspect ratio.
There may be other ways... but I was beginning to feel they were too complicated, would be difficult to manage going forward and perhaps suffer from compatibility issues with certain browsers.
So, I've resorted to doing everything server side.
It's all written in PHP anyway, so I actually pass the YouTube video ID to a PHP script, fetch the thumbnail directly from YouTube and then I crop and resize it based on the desired thumbnail width. height and aspect ratio.
That all happens on the fly. I will more than likely implement some sort of basic caching mechanism whereby I actually save the image locally eventually.
Until then, problem solved and I thank you so much to everyone who too the time to answer and/or comment.
Much appreciated, always!
Chris
This is what I use. It sets the padding based on the embed width and height attribute and calculates the aspect ratio.
As long as you have 2 divs around the iframe (you can tweak for embed) and the width and height set as an attribute in the iframe, this will work.
jQuery(document).ready(function() {
jQuery('.embed-wrapper').each(function(){
dcembedheight = jQuery('iframe', this).attr( "height" );
dcembedwidth = jQuery('iframe', this).attr( "width" );
ratio = ((dcembedheight/dcembedwidth)*100).toPrecision(4) + '%';
jQuery(this).attr("style" , "max-width:"+ dcembedwidth + "px");
jQuery('.embed-container', this).css({"padding-bottom": ratio});
});
});
HTML - exclude embed-wrapper for 100% width and to only use the css in 16:9 ratio
<div class="embed-wrapper">
<div class="embed-container">
<iframe src="//giphy.com/embed/BVNbHPjIfSNOw" width="480" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
CSS - notice that the padding is set by the jquery but the css contains default 16:9 ratio padding
.embed-container {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}