Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #1384640

    alvarobellido
    Participant

    Hi everyone,

    I’ve been reading a few topics related to this as I know others have had similar issues but nothing worked for me.

    I’m trying to embed a YouTube video on my homepage using CornerStone. If I use the Embedded Video Element in CornerStone the size is huge and when I change the size on YouTube it doesn’t change at all.
    I then tried to use a Plain Text element to paste my HTML code (this is the current video), and at least I can change the size, but unfortunately I get black bars on the sides.

    I would like to have a smaller video (width-wise), so that it is centered and with no black bars on the sides.

    I would be much appreciated if someone can help.

    URL is http://subeonline.es / WP Version 4.6 / ThemeX Version 4.6.1 / Cornerstone Version 1.3.1

    #1385124

    Christopher
    Moderator

    Hi there,

    Please use embed video element to embed the video on a test page so we can compare both videos and provide you with proper solution.

    Thanks.

    #1385229

    alvarobellido
    Participant

    Hi Christopher,

    Thanks for the quick answer! I’ve done it now, so you can find the video Embed Element at the bottom of the same page.

    Thanks!

    #1385288

    Christopher
    Moderator

    Hi there,

    Please keep embedded one and insert following code in Customize -> Custom -> Global CSS :

    .x-video .x-video-inner embed, .x-video .x-video-inner iframe, .x-video .x-video-inner img, .x-video .x-video-inner object, .x-video .x-video-inner video {
    
        left: 4%;
        width: 93%;
        height: 84%;
    }

    Hope it helps.

    #1385331

    alvarobellido
    Participant

    Awesome! That did the job. However now it’s leaving a massive gap with the following element underneath it. Any way to make the gap smaller? I’ve tried with the Padding options but it didn’t work.

    #1385358

    Christopher
    Moderator

    Hi there,

    Please update your code to :

    .x-video .x-video-inner {
        padding-bottom: 29.25%;
    }
    .x-video .x-video-inner embed, .x-video .x-video-inner iframe, .x-video .x-video-inner img, .x-video .x-video-inner object, .x-video .x-video-inner video {
        left: 15%;
        width: 70%;
    }

    Hope it helps.

    #1385435

    alvarobellido
    Participant

    Hi again,

    I had to play around with the figures a bit but it did the trick in the end! The video looks great now. Thanks a lot for your help!

    Álvaro.

    #1385456

    Thai
    Moderator

    You’re most welcome 🙂

    If you need anything else please let us know.