Embedded videos responsive problem

  • please see the example page
    *The video at the top of the page video is an embedded iframe.
    *The video at the bottom is a share link embed

    In both cases the behaviour of the video is a problem

    The video at the top -Hight is Fixed to youtube embed default and respond to screen size by resizing the video inside the frame’s defined hight.

    The video at the bottom does the same thing but the hight is much larger and result in unacceptable display on mobile

    I found very little discussion on this and solutions I found did not seem to make any difference

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    ?Please try to add the below CSS code from the Appearance > Customize > Custom CSS, and check.

    The issue is the height coming from the backend, the top video height is 315px while the bottom video height is 675px.

    @media screen and (max-width: 767px){
#post-2409 > div > div.oceanwp-oembed-wrap.clr > iframe {
    height: 315px;
}
}
    Thread Starter eyeswiseopen

    (@eyeswiseopen)

    thanks for getting back with a suggestion however, unfortunately:
    1. it made absolutely no difference.
    2. I was looking to fix it across the site and not effect just one post.

    The issue of responsiveness in embedded videos seems to have appear since the last update…

    no mater how I embed the video weather it is through pasting youtube share link in a post
    or inserting media from URL or using iframe the hight of the video is not changing according to the device used.

    Any other suggestion?

    Hello,

    Visited your site again and the added code seems working for that post.

    Please try to replace the above code with this one for all the posts.

    @media screen and (max-width: 767px){
.oceanwp-oembed-wrap.clr >iframe {
    height: 315px !important;
}
}

    Clear the entire browser/website/cloud cache, and check.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Embedded videos responsive problem’ is closed to new replies.