Video Issue

Sparkling
1

I am having issues with a video on the homepage. See next post.

2

I used this custom code for the YouTube video so it would be fluid and full width on the homepage. How can I adjust the spacing on the top and bottom? My homepage text is blocked from the YouTube video.

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Or is there another alternative to add a full width YouTube video on homepage?

The site is derosentertainment.com, I believe you currently have access to it. Please keep domain in private message if you mention it.

Thank you Movin!

3

Hi @lillaik,

I hope you are well today and thank you for your question.

You can display the text by changing the height in your above shared code from 100% to 300px and using the following custom CSS code.

body.home .entry-content {
    margin-top: 300px;
}

Best Regards,
Movin

4

Thanks Movin! :slight_smile: After adding the code above, my home page’s three column text went missing when I tried to expand the browser window (exactly 1200 pixels wide according to whatsmy.browsersize.com). Does that have anything to do with the custom css on the child style.css?

.navbar-default .navbar-nav > li > a {
  line-height: 40px;
  text-transform: none;
  font-size: 16px;
  letter-spacing:1px;
}

.navbar-nav > li > a {
  padding-top: 18px;
  padding-bottom: 18px;
}

.dropdown-menu {
    font-size: 16px;
}

.btn {
	border-radius: 0;
}

.well {
	border-radius: 0;
}

.dropdown-menu {
        border-radius: 0;
}

.copyright {
  margin-top: 60px;
  float: center;
  text-align: center;
}

#colophon {
  border-top: none;
}

.col-md-6 {
	width: 100%;
}

div#logo, div#logo * {
	max-width: 100% !important;
}

#page .navbar > .container .navbar-brand,
#page h1,#page h2,#page h3,#page h4,#page h5,#page h6,#page .h1,#page .h2,#page .h3,#page .h4,#page .h5,#page .h6 {
	font-weight: 600;
	font-family: 'Open Sans', serif;
	letter-spacing: 1px;
}

.widget ul li {
  list-style: none;
  border-bottom: none;
   /* border-bottom: 1px solid #F2F2F2; */
  margin-bottom: 11px;
  padding-bottom: 11px;
}

#footer-area ul li {
 border-bottom: none;
    /* border-bottom: 1px solid #fcf1f6; */
}

#footer-area .footer-widget-area a:hover{
  color: #f36f2b;
  text-decoration: underline;
}

.widget button#searchsubmit {
    background: #36439b;
    border-color: #36439b;
}

body.home .container {
    width: 100%;
}

header.page-header {
    display: none;
}

/* Buttons
----------------------------------------------- */
.btn-default, .label-default, .woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
  background-color: #36439b;
  border-color: #36439b;
  -webkit-transition: background-color 0.3s linear;
     -moz-transition: background-color 0.3s linear;
       -o-transition: background-color 0.3s linear;
          transition: background-color 0.3s linear;
}
.btn-default:hover,
.label-default[href]:hover,
.label-default[href]:focus,
.btn-default:hover, .btn-default:focus,
.btn-default:active,
.btn-default.active,
#image-navigation .nav-previous a:hover,
#image-navigation .nav-next a:hover, .woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{
  background-color: #f36f2b;
  border-color: #f36f2b;
  color: #FFF;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

/* Remove borders around boxes
----------------------------------------------- */
.post-inner-content {
  padding: 45px 50px;
  background-color: #fff;
  border: none;
  border-top: none;
}
body.archive .post-inner-content,
body.blog .post-inner-content,
.post-inner-content:first-child {
  border-top: none;
}
 
/* Home page read more button
----------------------------------------------- */

a.osc_servicebox_readmore_css.btn.btn-lg {
background-color: white;
color: #36439b;
border: 2px solid #36439b;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 20px;
font-weight: 600;
}

a.osc_servicebox_readmore_css.btn:hover {
 -webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
background-color: #36439b;
color: white !important;

}

/* Center navigation menu
----------------------------------------------- */

#page ul#menu-primary-menu {
    float: none;
    margin: 0 auto;
    display: table;
}
 
 
 
 #logo { width: 650px; margin: 0 auto; } 
 #page .navbar-header { float: none; } 
 
 
 .video { position: absolute; top: 0; left: 0; width: 100%; height: 400px; }

body.home .entry-content {
    margin-top: 400px;
}
body.home .main-content-area {
  margin-top: 0px;
}

P.S. Please keep domain in private message or not mention the domain, thank you! :slight_smile:

Thanks again for your superb assistance!

5

I can’t reproduce the issue on your site so could you please share the screenshot of the issue?

Also please don’t share your CSS code from your site style.css file because i can get it from your site and do not post your every reply as private but only post if it contains any sensitive information.

6

Got it sorted, thanks.

7

You are most welcome here :slight_smile: