I am building a responsive website that has an embedded youtube video on it. The video is in a responsive iframe and works perfectly fine in all browsers except in Firefox. There it simply doesn't show up.
I tried savemode, adding html5 to the link, commenting all js and js-queries out. If I add the width and height in px it does show and works fine, but then it's not responsive.
I can make it show up by changing the height of the container into a percentage or vw-value. No matter what figure I add, it will always render the video double height and cutting off big parts of left and right sides. Also it will cut off more of the width when the viewport shrinks. When changing the container value to anything other than 0, the same happens in all other browsers.
Tried Firebug, but that doesn't even see the iframe.
Here is the code:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 4vw;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="embed-container">
<iframe src='https://www.youtube.com/embed//EyhQN24InWg?html5=1' frameborder='0' allowfullscreen></iframe>
</div>
web url:
https://www.marjanderksen.com
Have you tried to use FitVids.js?
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$(".embed-container").fitVids();
});
</script>
Link to download plugin: https://github.com/davatron5000/FitVids.js
Related
I have a responsive embedded YouTube video on my (bootstrap) website.
When I choose the YouTube full screen option, it works on Firefox and Chrome, but on Safari it briefly flickers, then just shows the top of my entire web page in full screen, as though Safari itself is in full screen mode.
CSS:
.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%; }
HTML:
<div class='embed-container'><iframe src='https://www.youtube.com/embed/myyoutubecode?rel=0' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
Does anyone know of a way to make this work in Safari?
I found the answer.. in case anyone else experiences this:
wow.js animations seem to break the fullscreen functionality by causing this issue. Disabling the animation for the div fixes the problem.
I have checked my CSS and I never specify the logo as a background graphic. There is not logo in the background graphic - just a gray bar, but in IE8 and IE7 the logo is duplicating itself one over the other. Here is the website: www.americaninstrument.com.
I ran a W3 compatibility test and, while there were issues with the javascript analytics code and some links, there was nothing that would affect this logo.
The logo image is called object0.png
First child div of the one with class wk-shapes:
<div style='background: url("http://www.americaninstrument.com/images/object0.png") no-repeat 15px 37px; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;'>
has the following inline-style:
background-image: url("http://www.americaninstrument.com/images/object0.png")
I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor has position:absolute;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
)
The following code can be used to demonstrate or reproduce this problem. you can also see this at http://sketchmotion.com/image-test2/. You will notice that resizing the browser window will resize the image in Chrome but not IE (I am running IE 11) . However, if you remove the following lines:
.mydiv{
position: absolute;
}
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use position: absolute; on some of my parent divs on my site. And I need my site to work in IE and Firefox.
Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{
position: absolute;
}
img{
/*** Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video. ***/
/*** You can set the media element’s max-width to 100 percent, and the browser will make ***/
/*** the image shrink and expand depending on its container. ***/
/*** To maintain the right proportions use auto height ***/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
</head>
<body>
<!-- -->
<div class="mydiv">
<div class="slides">
<div class="slide">
<img alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
</div>
</div>
</div>
</body>
</html>
Try this:
.mydiv {
position: absolute;
width: 100%;
}
I don't have an explanation exactly why, but this works. :)
I confirmed that using width: 100%; for parent and all ancestor divs makes it work in IE. However this is a bit of a pain because often that is not what you want to do. Chrome does not have that limitation and scales the image regardless which seems like a more sensible and consistent approach IMHO.
Thanks again Terry Clancy
For the responsive to work on IE. Do not include pictures in a <table>. Just use <div> and use CSS:
img {
max-width: 100%;
height: auto;
width: auto\9;
}
I am writing a simple HTML5 application for iPad and I am looking for a simple jquery solution for page transition. I know you would recommend jQueryMobile but problem with that it uses ajax to loads next page in current page and then kicks off transition so css of the page that I m trying to load is getting disturbed see my question. I also tried this and this plugin was the thing that I was looking for but problem with this is that it is not working with iPad and also page flickers a lot while transition so I dropped this option. Another option I found is jQTouch but as far as I know jQTouch only works for transition effects to div, not sure how to use it for page transition.
What I want is that on click of Transition link in Transition index.html should get displayed with transition effects without flickering and css disturbance of index.html page.
Could someone please recommend me some plugins using which I can achieve page transitions without disturbing CSS while transitions.
Hopefully this works for you... the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)
I'm making a slideshow of images with the class display. I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:
.display {
max-width: 80%;
max-height: 80%;
}
It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.
Thanks very much for any help.
You need to tell the browser about html height and body height. Then it calculates the height based on those sizes. The following works fine on all bowers.
html { height: 100%; }
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.display {
max-width: 80%;
max-height: 80%;
overflow: hidden;
}
There's a working example here: http://jsfiddle.net/P7wfm/
If you don't want image to crop if they exceed the 80% height or width set img height to
.display img {
min-height: 100%;
min-width: 100%;
}
I agree with #Uds, you will need to specify the height and width of the body and html element
Other thing to keep in mind:
Moreover you will also need to define the browser in CSS code, you can define it by follow:
.display{
/* For general browser */
max-width: 80%;
max-height: 80%;
/* For Firefox browser */
-moz-width: 80%;
-moz-height:80%;
/* For Chrome and Safari browser */
-webkit-width: 80%;
-webkit-height:80%;
/* For Opera browser */
-o-width: 80%;
-o-height:80%;
}
This will specify that which browser should have what kind of height or width.
You need to set height for container element or to body:
body {
height:100%;
min-height:100%;
}
Tried the proposed solutions without success, on Firefox 62.0, max-height animation is ignored.
There is also a delay when the max-height property is changed matching the duration of the animation.
I had the same problem today but with the nice twist that I could not set all parental elements to a height of 100%.
I found a clue to another solution to this problem here:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
You can assign not only % to max-height, but also "em", so if you set your html and body to a font-size of 100% this works similiar to a percental width.
<div>
<p>
<img src="" alt="">
</p>
</div>
html,body{
font-size: 100%;
}
img{
max-width: 100%;
max-height: 50em;
}
DEMO
Changing max-heigth to 80vh worked for me.