I'd like to have my website including v-app-bar and everything limited to max-width 1440px on larger screen, and add a thin bolder to both left and right edges. For the rest of the area outside of the edge, I'd like to add a nice background color or image.
What's the better way to accomplish this idea? I am using Vuetify v2.1.5. Thanks.
You can do this with plain 'ol CSS
#page {
background: url(niceimage.jpg);
width: 100vw;
min-height: 100vh;
}
#app {
max-width:1440px;
margin: 0 auto;
}
where #app is your application div, and #page is an element that wraps it;
We are using a YouTube video on our website as a hero banner.
However few days ago it started showing it's title, watch later button and a share button. We were able to hide them using &showinfo=0 at the end if the URL.
I found out that showinfo has been deprecated and thus you can no longer hide the fact that it is a YouTube video showing there.
Is there any other parameter that might be able to do the same thing?
You cannot do it with CSS or JavaScript as it is an iframe.
Any ideas are much appreciated.
UPDATE:
Any layer or mask over the video doesn't help, as the info shows when the video is loading, or if you click outside the browser, the video will pause and the info shows.
Hiding the top ~60px works, but it is not a good solution for me.
Directly from show info
Note: This is a deprecation announcement for the showinfo parameter. In addition, the behavior for the rel parameter is changing. Titles, channel information, and related videos are an important part of YouTube’s core user experience, and these changes help to make the YouTube viewing experience consistent across different platforms.
The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.
It clearly states that this is something they consider to be part of the cor youtube experience. There is no suggestion of a workaround or a new parameter that you could send to archive the old results. They are removing it. If you tried to force it out using javascript and css i would almost suggest you are against the TOC which states your not allowed to change that display. People should know you are showing something from YouTube
If you need to hide the info, ideally go for Vimeo pro (which properly supports a no info embed),
Otherwise there is a simple workaround:
https://jsfiddle.net/10ov5hgw/1/
It cuts off the bottom & top 60px of the iframe, but via overflow rather than a gross looking black bar on top, so video still looks fullscreen the entire time (and barely any of the video is cutout if you force 720) ,
This hack supports having to support mobile views aswell, without heavily impacting the visible area of the video.
.video-container{
width:100vw;
height:100vh;
overflow:hidden;
position:relative;
}
.video-container iframe,{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-container iframe, {
pointer-events: none;
}
.video-container iframe{
position: absolute;
top: -60px;
left: 0;
width: 100%;
height: calc(100% + 120px);
}
.video-foreground{
pointer-events:none;
}
<div class="video-container" >
<div class="video-foreground">
<iframe
src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&mute=1"
frameBorder="0" allowFullScreen>
</iframe>
</div>
</div>
The solution I found aesthetically most pleasing is to lay a high res thumbnail over the video and hide it at hover. This also deals with the problem that the youtube preview is low res and looks cheap in my opinion.
Check it out here:
http://jsfiddle.net/d9D9E/1/
Had to write code in order to show the js fiddle :/
.video-thumbnail{
z-index:300;
position:absolute;
top:0;
left:0;
width:100%;
}
.video-thumbnail:hover{
display:none;
}
Not having 'rel=0' is irritating, but there is a work around. If you work with the IFrame API, (as opposed to embedding an iframe ex http://youtu.be/?videoIDxxx...) you can get the event for the stopping (completing) of the video, then cue up the video by ID into the player. See https://developers.google.com/youtube/iframe_api_reference#Playback_controls for reference to the basic player.
....
<div id="player1"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player ;
function onYouTubeIframeAPIReady()
{
player = new YT.Player('player1',
{
videoId: 'YourVideoId',
events: {
'onStateChange': onPlayerStateChange
}
});
}; // onYOuTubeIframeAPIReady
function onPlayerStateChange(event)
{
// Alt approach //if( event.data == 0){ location.reload()}
if( event.data == 0)
{ player.cueVideoById({videoId:'YourVideoID',
suggestedQuality: 'hd720'})
};
}
</script>
I was looking at the same problem and the only solution I found is to set the video in autoplay and place a transparent layer over the youtube box.
The user would not be able to interact with the player, but it can be useful in some situation like banner.
Unfortunately the code doesn't seem to run correctly on stackoverflow I also add a jsfiddle: http://jsfiddle.net/z3dqpuy0/
.yt-cntainer {
position: relative;
}
.yt-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="yt-cntainer">
<iframe id="vid-player-1" src="https://www.youtube.com/embed/Bey4XXJAqS8?enablejsapi=1&rel=0&controls=0&showinfo=0&autoplay=1" frameborder="0"></iframe>
<div class="yt-mask"></div>
</div>
Well, I just noticed it as well. It sucks and ruins the aesthetics. So I just did a
header {
/* remove when YT got its brain back */
margin-top: -56px;
}
while hoping that they'll re-add showinfo=0 again.
What about this. Yeah this will zoom the video.
iframe {
transform:scale(1.4);
}
<div id="schnitt">
<iframe width="500" height="280" src="https://www.youtube.com/embed/rlR4PJn8b8I?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<style>
#schnitt {
height:250px;
overflow:hidden;
}
iframe {
margin-top:-55px;
}
I have an animated svg, but firefox doesn't currently support the transform-origin property with % for svgs. So I'd like to hide the animated svg and show a static svg or png when users view in firefox. I'm not sure how to do this. I don't think feature detection will work, because firefox does support svgs and transform-origin, just not transform-origin for svg. Thanks for any suggestions.
Had this issue. I remember reading a comment somewhere in SO that Firefox42 supports this with a prefix:
-moz-transform-origin
anyway, to detect firefox i use a snippet found here:
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
//Do Firefox-related activities
}
in your case, if the browser is indeed firefox, and assuming you are using 2 container elements, 1 for your SVG and one for your PNG, you could:
1) directly add/show the elements with js
2) add a 'firefox' class to your root html element and style your css accordingly.
so, let's say you have a #svg and #png containers
in your css you'd use:
.firefox #png { display: block; }
#png { display: none; }
#svg { display: block; }
.firefox #svg { display: none; }
Hope this helps!
This might just be an impossible question, but I want to give it a try: so how can I have a box-shadow like effect in IE8 qirks mode. (Don't ask me why but we are not using DOCTYPEs).
I've already tried PIE, and that is not an option for me.
You could write a filter statement directly, rather than having PIE automatically generate one for you.
http://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx
Depending on what kind of box-shadow you want, you could fake a simple box-shadow effect, directly below the element, using the :after pseudo-selector. Admittedly you might still have to use bg images for your shadow effect, but at least it would separate the BG image from the BG of your main element and keep things less fiddly to update.
Edit: although if it's Quirks Mode, that may not work :-/
So it might be something like:
myelement {
position: relative;
...
}
myelement:after {
display: block;
width: XXpx;
height: 5px;
position: absolute;
top: 100%;
left: 0;
content: '';
background: ...
}
I recently tried applying a gradient background to a webpage using only CSS3.
while testing out the following code:
body {background: -moz-linear-gradient(top, blue, white);}
The result was:
Not exactly what I was looking for...
Any idea what is going on?
OS is Win7 64bit and Firefox 4.
Thanks!
you may want to add no-repeat to that background property…
or set a height to the <body> (and the <html>) like so:
html { height: 100%; }
body { background: -moz-linear-gradient(top, blue, white); height: 100%; }
This is happening because the height of the body is small, and by default the background is repeating.
You can either make it not repeat:
body { background-repeat: no-repeat; }
or make the height of the container (html) the size of the window:
html { height: 100%; }
though note that the latter can sometimes have unexpected effects when scrolling.