Problems with YouTube iframe

Home Forums All Other Themes Problems with YouTube iframe

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #126228
    emilia.lahti
    Participant
    • Topics: 4
    • Replies: 14
    • Total: 18
    Member since: July 18, 2018

    Hi,

    I am having problems with a youtube iframe that I have embedded on the home page of my domain. My domain URL is https://www.valkonverstas.fi/. The video has been embedded in Appearance – Section 1 with the following code:

    <div class=”video-container”><iframe src=”https://www.youtube.com/embed/L-JM0bx0RKo?rel=0&#8243; width=”854″ height=”480″ frameborder=”0″ allowfullscreen=””></iframe></div>

    The custom CSS I have inserted under Appearance – Basic settings is following:

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 12px; height: 0; overflow: hidden;
    }
    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    margin: 0 auto;
    display: block;
    top: 0;
    width: 75%;
    height: 75%;
    }

    The problems I have with this:
    – How can I center the video? Currently it is positioned in the left.
    – How can I make the margin smaller? There is currently a lot of empty space underneath the video.
    – When I change the video size it changes both on desktop and mobile. On desktop the size is good now, however on mobile it is way too small. How can I change the size on mobile to be larger?

    Thanks for your help!

    #126279
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22196
    • Total: 22196
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    .video-container { height:auto; padding-bottom:0; padding-top:0;}
    .video-container iframe { position:relative; height:500px;}
    
    @media screen and (max-width:767px) {
    .video-container iframe { width:100%; height:350px;}
    }

    Regards,
    Dave

    #126480
    emilia.lahti
    Participant
    • Topics: 4
    • Replies: 14
    • Total: 18
    Member since: July 18, 2018

    Hi Dave,

    Thanks for your help! The iframe size on mobile is still as small as before even after adding the custom CSS. Could it be that the earlier CSS I had inserted is messing with it? Could you have another look, please?

    Thanks and kind regards,
    Emilia

    #126528
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22196
    • Total: 22196
    Member since: August 16, 2013

    Hi,

    Can you send us the screenshot of your issues? Upload your screenshot on http://imgur.com/ and paste the share url here.

    Regards,
    Dave

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.