Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 25, 2022 at 7:59 pm #1359406
    hostworks

    I have a youtube video on this page to resize for mobile width on mobile but retain size on desktop. Any thoughts as to how I can do this? I don’t see anything in the responsive section. Here is the page https://truthbook.com/
    I would like to retain the video ratio but resize for mobile. I.e, play without the black bars showing.

    July 26, 2022 at 6:15 am #1359428
    Nikko

    Hi hostworks,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (max-width:767px) {
  #top iframe {
    height: auto;
  }
}

    Best regards,
    Nikko

    July 26, 2022 at 6:29 am #1359430
    hostworks

    Nikko,

    Thanks, that is much better, When the video starts, you will notice that there are vertical black bars on the outside of the video. I’m using the correct ratio on the desktop; how can I properly display the ratio on mobile?
    <iframe width=”1000″ height=”563″ src=”https://www.youtube.com/embed/e3ZHO7xKEpQ&#8221; title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

    July 26, 2022 at 6:38 am #1359431
    hostworks

    Oops, forgot mobile screenshot.
    https://truthbook.com/wp-content/uploads/2022/07/The-Complete-Life-of-Jesus.-The-Urantia-Book-free-and-online-at-Truthbook.jpg

    July 26, 2022 at 6:45 am #1359434
    Nikko

    Hi hostworks,

    Please try to use this CSS code instead:

    @media only screen and (max-width:767px) {
  #top iframe {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

    Hope it helps.

    Best regards,
    Nikko

    July 26, 2022 at 2:17 pm #1359468
    hostworks

    Nikko,
    That did the trick! Thank you very much. You can close this ticket. Enfold rocks again.

    July 26, 2022 at 5:42 pm #1359487
    Mike

    Hi,
    Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Would like to change the video width on mobile to match size’ is closed to new replies.