Question

YouTube embed size is incorrect due to style sheet code

6 months ago
31 October 2023
1 reply
48 views

bdoyle28
0 replies

I had a developer add coding to my style sheet which i needed for video to display correctly on my page. However, i’m now having trouble embedding an additional youtube shorts video. The size is correct on mobile, but is very small on desktop.

Image of issue:

https://i.imgur.com/HyhTeGT.png

I’ve included the custom coding from my style sheet below. Does anyone nkonw the code that needs to be altered/removed in order to allow me to embed youtube shorts in the correct sizing for both mobile and desktop. Or any other workarounds? thanks so much! - brian

a#lp-pom-button-2182 {
z-index: 999;
}
.backdrop__3tG5Hl.open__1oMisJ .lightbox__3bUz8F {
height: auto !important;
}
#lp-pom-root .lp-positioned-content iframe {
height: 100% !important;
}

.lp-element.lp-pom-box.box-header.sticky a#lp-pom-button-450 {
right: 9% !important;
width: 32% !important;
}
a.absolute-ancher-on-video {
left: 132px !important;
bottom: 30px;
top: auto !important;
padding: 13px 0 23px !important;
height: 18px !important;
font-size: 18px !important;
}
#lp-pom-root {
zoom: 100%;
}
div#lp-code-1228 {
width: 520px !important;
left: -108px;
}
body div#lp-pom-box-2069, body div#lp-pom-box-2076{
display: block !important;
}
.mobile-block{
display: block !important;
}
}
.mobile-block {
display: none !important;
}
div#lp-pom-box-2069, div#lp-pom-box-2076{
display: none !important;
}
.lp-element.lp-pom-box.box-header.sticky {
position: fixed !important;
width: 100% !important;
text-align: center !important;
left: 0 !important;
right: 0 !important;
}
div#lp-pom-box-1733 {
z-index: 999;
}
.ifream-cstm-height iframe {
height: 100% !important;
}
.mobile-block {
display: none !important;
}

.lp-element.lp-pom-box.box-header.sticky div#lp-pom-box-1733-color-overlay {
width: 100%;
}
.lp-element.lp-pom-box.box-header.sticky div#lp-pom-image-449 {
left: 16%;
}

.backdrop__3tG5Hl.open__1oMisJ .lightbox__3bUz8F iframe {
height: 100% !important;
}
div#lp-pom-root {
height: 100% !important;
}
.mobile-block {
display: block !important;
}
div#lp-code-3 iframe {
width: 100% !important;
height: auto !important;
margin-top: 10px;
margin-left: 5px;
}
iframe {
height: auto;
width: 100%;
}
#lp-pom-box-1733, #lp-pom-box-1733-color-overlay {
height: 80px !important;
}
iframe {
height: 174px;
}
#lp-pom-box-1733 {
left: 0;
}
.html5-main-video {
width: 320px !important;
}
.lp-element.lp-pom-box.box-header.sticky a#lp-pom-button-450 {
right: 17%;
width: 11%;
left: auto;
}
div#lp-pom-box-555 {
top: 0;
height: 81px;
float: left;
}
div#lp-pom-box-1733 a#lp-pom-button-25 {
width: 130px;
}}
@media screen and (min-width:1391px) and (max-width:1690px){
#lp-code-1228 {
width: 100% !important;
height: auto !important;
}

div#lp-pom-box-1733 div#lp-pom-image-449 {
left:7%;
}
div#lp-pom-box-1733 a#lp-pom-button-450 {
right: 7%;
left: auto;
}
#lp-pom-text-67 {
left: 100px;
}
}

@media screen and (min-width:768px) and (max-width:1390px){
div#lp-pom-box-1733 div#lp-pom-image-449 {
left: 15%;
}
div#lp-pom-box-1733 a#lp-pom-button-450 {
right: 15%;
left: auto;width: 15%;
}}

#lp-code-1228 {
width: 100% !important;
height: auto !important;
}
a.absolute-ancher-on-video {
display: block;
border-style: none;
border-radius: 42px;
left: 664.5px;
top: 545px;
z-index: 59;
width: 273px;
height: 49px;
position: absolute;
background: rgba(41,51,255,1);
box-shadow: none;
text-shadow: none;
color: #fff;
border-width: undefinedpx;
border-color: #undefined;
font-size: 26px;
line-height: 31px;
font-weight: 400;
font-family: Fjalla One;
font-style: normal;
text-align: center;
background-repeat: no-repeat;
padding-top: 20px;
}


















#lp-pom-root {
min-width: 100%;
overflow-x: hidden;
}
html {
scroll-behavior: smooth;
}
div#lp-pom-box-1316, #lp-pom-box-1366, div#lp-pom-box-1251 {
border: none;
box-shadow: 0 4px 15px rgb(234 234 234);
}









.lp-element.lp-pom-box.k89 {
z-index: -1 !important;
border: 0px !important;
}
@media (max-width:767px){

.lp-element.lp-pom-text.b56.nlh h3 span {
font-size: 30px !important;
}
.lp-element.lp-pom-text.b78.nlh h3 span {
font-size: 30px !important;
line-height: 40px;
}
}


@media screen and (max-width:600px){
label.main.lp-form-label {
font-size: 30px !important;
}

.#lp-code-3 {
   width: 100% !important;
   height: auto !important;
left: 0px; !important;
}
div#lp-pom-root {
height: 100%;
}
.lightbox__3bUz8F {
   width: auto !important;
   height: 100% !important;
}
#lp-pom-root {
   min-width: 329px !important;
}
iframe {
height: 100% !important;
}
}

#lp-pom-root {
zoom: 80%;
}

/* VIDEO CSTM CSS*/

@media screen and (min-width:380px) and (max-width:767px) {
body .absolute_audio_icon.reltave_coloms {
left:-10px !important;
}}
@media screen and (min-width:320px) and (max-width:767px) {
#lp-pom-form-1467 .lp-pom-form-field .lp-form-label {
font-size: 11px;
}
body .absolute_audio_icon.reltave_coloms {
left: 23%;
bottom: 10px;
width: 31%;
}
.virtual-coaching-rt-coloms {
padding: 0 0 10% !important;
}
section.axius-core-video-home-section {
padding-bottom: 0;
}
video#background-video {
width: 100%; height: 320px !important;
}
body .absolute_btn_audio .listen_audio {
bottom: 73px;
width: 36%;
left: 31%;
font-size: 7px;
padding: 7px 4px;
}}



@media screen and (min-width:1299px) and (max-width:1412px) {
body .absolute_audio_icon.reltave_coloms {
left: 15%;
bottom: 18px;
width: 22%;
} }

@media screen and (min-width:999px) and (max-width:1198px) {
body .absolute_btn_audio .listen_audio {
width:46%;
}
body .absolute_audio_icon.reltave_coloms {
left: 2%;
bottom: 18px;
width: 30%;
} }
@media screen and (min-width:768px) and (max-width:998px) {
body .absolute_audio_icon.reltave_coloms {
left: -1%;
bottom: 18px;
width: 37%;
}
body .absolute_btn_audio .listen_audio {
bottom: 125px;
width: 56%;
}}

.absolute_btn_audio .listen_audio {
position: absolute;
bottom: 105px;
padding: 17px 12px;
width: 50%; cursor: pointer;
left: 12%;
background: #00f !important;
text-transform: uppercase;
font-size: 14px; font-weight: 600;
border-radius: 40px;
text-align: center;color:#fff;
}
.cstm-inner-virtual-colms {
position: relative;
}
.absolute_audio_icon.reltave_coloms {
position: absolute;
left: 5%;
bottom: 18px;
width: 25%;
}
video#background-video {
height: 650px;
}
.cstm-inner-virtual-colms img {
width: 50%; cursor: pointer;
}

</style>

1 reply

Userlevel 7

+3

Hi @bdoyle28,

That seems like a lot of unnecessary CSS on first look but it might make sense in the context of the whole page.

You have a few options:

When you are adding the embed videos to your page, you just need to adjust the height/width to a % value.

<iframe width="560" height="315" src="https://www.youtube.com/embed/xyzxyzxyzxyz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

becomes:

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/xyzxyzxyzxyz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

This way the video will conform to the size of the Unbounce embed video element.
Your 2nd option is to add the video embed to the desktop view. Adjust it how you like to appear on the page and after that hide it on the mobile view. Repeat the process for the mobile view - add the video, adjust and hide it for the desktop view.
Last but not least… you can add custom classes to your elements and use those to target specific videos and how you want them to appear on the page.

Unless I’m missing something, what you are trying to achieve shouldn’t require too much custom CSS.

Best,

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded