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.
Related
QUESTION:
Using the Gamepad API, i am having a problem when re-sizing the window; namely, a finite padding-bottom appears between the bottom of the #gameBoard and the bottom edge of the Browser window -- which I do not want:
Please note that I have tried a Sticky Footer which depends on position: absolute; which I would prefer to avoid.
EG,
with a padding-bottom > 0
I am looking for this with each window re-size:
padding-bottom = 0
HTML:
<div id="gameEnclosure">
<div id="header">
stuff here
</div>
<div id="gameBoard">
<canvas id="game">
game piece img's here
</canvas>
</div>
</div> <!-- gameEnclosure -->
CSS
/* COMMON RESET */
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body {
background-color: blue;
}
#gameBoard {
display: block;
position: relative;
width: 100%;
height: auto;
background-color: #fff;
background-image: url("../images/room.gif");
background-size: cover;
}
As already stated, I have tried using a Sticky Footer and I just do not like using position: absolute. Also, the individual game piece images do not maintain their proper aspect ratio with window re-sizing = another no-no.
JS
function doBodyOnResize() {
let gameHeight = $('#gameBoard').outerHeight();
$('body').css('padding-bottom', gameHeight);
$('#gameBoard').css('height', gameHeight);
}
This is the onresize function I used to have with the Sticky Footer.
Without a Sticky Footer, game pieces zoom in and zoom out just great -- if I could just get keep padding-bottom = 0 upon window resizing.
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
I have added a sticky footer to a SharePoint master page using the flexbox method, and it is working fine in all browsers on Windows, but does not work correctly for Safari or Chrome on OSX.
The HTML is roughly as follows:
<body>
<form>
<!--
a whole bunch of SharePoint stuff here that I can't mess with
-->
<div id="s4-workspace">
<div id="s4-bodyContainer"></div>
<div id="footer"></div>
</div>
</form>
</body>
And my initial CSS is this:
#s4-workspace {
display: flex;
flex-direction: column;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
}
Now after searching around a bit I found this question, and based on that I started playing around with all kinds of vendor prefixes, and I even realized that the way I was using the flexbox was maybe a little unorthodox. Instead of having the main content div #s4-bodyContainer grow to use extra space, I was getting the footer div to expand it's top margin up to fill any extra space, which I guess flexes the #s4-workspace to fill the viewport if necessary.
So then I tried adding
#s4-bodyContainer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
But that didn't help either (and actually started causing problems in IE on Windows, which had worked fine before).
The behavior that I'm trying to fix in Safari and Chrome on OSX is this:
When the page renders, it seems as though the footer calculates it's top margin based on the viewport. It is always initially sitting at the bottom of the window, as if it was the case that there was little content and it should push down to the bottom of the window. But this happens even if there is a lot of content flowing underneath it, and it really should have pushed down to below #s4-bodyContainer (out of the viewport). If I scroll the page, it just sits on the page exactly where it was initially drawn and remains covering whatever content was under it on the initial rendering.
What can I do about this? What secrets are out the for getting flexboxes working correctly on OSX?
Found the answer here.
Apparently (should I say unsurprisingly?) there are some bugs in the way certain browsers handle flexboxes.
I was able to get the behavior I wanted reliably across IE, Firefox and Chrome on Windows and Safari, Firefox and Chrome on OSX with the following:
#s4-workspace {
display: flex;
flex-direction: column;
}
#s4-bodyContainer {
flex: 1 0 auto;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
flex-shrink: 0;
}
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'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.