Youtube video overflows portrait display

Sheepiely

Hi

I have rotated my screen to portrait with “display_rotate=1” in /boot/config.txt. And after doing that, the width of the Youtube video overflows the screen. How can I correct that?

DJB1966

Have you tried changing setting in VLC to full screen

Sheepiely

@djb1966 I didn’t think about that, I was playing with the CSS files with no luck. Unfortunately I just tried changing the vlc preference and did a reboot but still have the same problem.

DJB1966

Have you got ```fullscreen: true`` option in GA config but i think this has more to do with the Background module?

responseConfig: {
  useFullscreen: false,
  useResponseOutput: true,
  responseOutputCSS: "response_output.css",
  screenOutputTimer: 5000,
  activateDelay: 250,
  useAudioOutput: true,
  useChime: true,
  confirmationChime: true,
  useInformations: true
}

Sheepiely

@djb1966 I’ve got full screen as true already.

ClassicRed

@sheepiely

Hello
essai cela
A mettre dans ton custom.css

html {
  /*cursor: none; */
  /*overflow: hidden;*/
  background: #000;
}

::-webkit-scrollbar {
  display: none;
}

body {
  margin:  3.14vw;
  position: absolute;
  height:  calc(100% - 11.11vh);
  width:  calc(100% - 6.28vw);
  background: #000;
  color: #aaa;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

/**
 * Default styles.
 */

.dimmed {
  color: #666;
}

.normal {
  color: #999;

}

.bright {
  color: #fff;

}

.xsmall {
  font-size:  1.38vh;
  line-height:  1.85vh;

}

.small {
  font-size:  1.85vh;
  line-height:  2.31vh;

}

.medium {
  font-size:  2.77vh;
  line-height:  3.24vh;

}

.large {
  font-size:  6.01vh;
  line-height:  6.01vh;

}

.xlarge {
  font-size:  6.94vh;
  line-height:  6.94vh;
  letter-spacing:  -0.15vw;

}

.thin {
  font-family: Roboto, sans-serif;
  font-weight: 100;
}

.light {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
}

.regular {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
}

.bold {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

header {
  text-transform: uppercase;
  font-size:  1.38vh;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  border-bottom:  0.05vw solid #666;
  line-height:  1.38vh;
  padding-bottom:  0.26vw;
  margin-bottom:  0.92vh;
  color: #999;

}

sup {
  font-size: 50%;
  line-height: 50%;

}

/**
 * Module styles.
 */

.module {
  margin-bottom:  2.77vh;

}

.region.bottom .module {
  margin-top:  2.77vh;
  margin-bottom: 0;

}

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.pre-line {
  white-space: pre-line;

}

/**
 * Region Definitions.
 */

.region {
  position: absolute;

}

.region.fullscreen {
  position: absolute;
  top:  -5.55vh;
  left:  -3.14vw;
  right:  -3.14vw;
  bottom:  -5.55vh;
  pointer-events: none;

}

.region.fullscreen * {
  pointer-events: auto;

}

.region.right {
  right: 0;
  text-align: right;

}

.region.top {
  top: 0;

}

.region.top .container {
  margin-bottom:  2.31vh;

}

.region.bottom .container {
  margin-top:  2.31vh;

}

.region.top .container:empty {
  margin-bottom: 0;

}

.region.top.center,
.region.bottom.center {
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);

}

.region.top.right,
.region.top.left,
.region.top.center {
  top: 100%;

}

.region.bottom {
  bottom: 0;

}

.region.bottom .container:empty {
  margin-top: 0;

}

.region.bottom.right,
.region.bottom.center,
.region.bottom.left {
  bottom: 100%;

}

.region.bar {
  width: 100%;
  text-align: center;

}

.region.third,
.region.middle.center {
  width: 100%;
  text-align: center;
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

}

.region.upper.third {
  top: 33%;

}

.region.middle.center {
  top: 50%;

}

.region.lower.third {
  top: 66%;

}

.region.left {
  text-align: left;

}

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;

}

Sheepiely

Thanks @ClassicRed. Added that to my custom.css but the YouTube video is still overflowing. The addition did change the size of some of the modules on the mirror but when it comes to Youtube, I can still only see half of the video.

bigjojo

hello, if I’m not mistaken.
you can try this.
via the desktop open vlc, launch a video, resize the window with the mouse. then file and exit.
normally it keeps the display size in memory.
a +

Sheepiely

@bigjojo I tried that but it keep going back to the landscape full screen size regardless of whether I ticked full screen or not.

I’ve now measured my wall and decided to go with landscape on my MagicMirror, so this is now a non-issue for me.

Solved Youtube video overflows portrait display