Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 22, 2017 at 2:27 pm #891593
    Anton

    Hi,

    since 2 weeks I have this problem: in the sidebar and in the footer the videos don’t display full size despite the correct code inserted in the widgets.
    Footer and Sidebar examples
    You can check it any page (post) with the sidebar and footer (http://www.newpointdeview.com/pro-en/intercultural-compentence/cultural-analysis-economic-paradoxes/).

    Here’s an example of my code added to the widget:

    <iframe src="https://www.youtube-nocookie.com/embed/videoseries?list=PLYDYp-UIQP-JtiOard1fcHQb_th4aHshR" width="390" height="219" frameborder="0" allowfullscreen=""></iframe>

<a href="https://www.youtube.com/user/NewPointDeView"><img class="aligncenter wp-image-12151" style="padding: 0;" src="http://www.newpointdeview.com/wp-content/uploads/Subscribe_Button-logo.png" alt="" width="120" height="37" /></a>

    I’ve already deactivated all plugins, it hasn’t changed anything.
    Any idea where the issue comes from ?

    December 22, 2017 at 5:16 pm #891644
    Victoria

    Hey Anton,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
iframe, object, embed {
    min-height: 220px;
    min-width: 386px;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    December 22, 2017 at 5:41 pm #891656
    Anton

    Hi,

    unfortunately this code is unsuitable. It fixes the issue in the footer, but distroyes in the sidebar, which is thinner.
    On the other hand, I’ve found that the code iframe, object, embed {max-width: 100%;} is apparently not working properly.

    I don’t think a simple css code will resolve this problem, because the discribed issue appeared shortly after the last Enfold’s update. Before, the videos in the footer and the sidebar were appearing correctly.

    • This reply was modified 6 years, 11 months ago by Anton.
    December 26, 2017 at 11:14 am #892026
    Anton

    Hello anyone …

    December 27, 2017 at 8:10 pm #892208
    Victoria

    Hi,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#footer iframe {
    min-height: 220px;
    min-width: 386px;
}
.sidebar iframe {
    min-height: 170px;
    min-width: 320px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    December 27, 2017 at 9:49 pm #892242
    Anton

    Hi,

    the code you gave is adapted only to the big screens, but not for iPads and mobile devices. Putting a min-height or width is not a solution.

    Why the code iframe, object, embed {max-width: 100%;} doesn’t work anymore??
    Originally it’s supposed to adjust these “objects” automatically to the necessary width keeping the height ratio.

    December 30, 2017 at 9:00 pm #892373
    Mike

    Hi,
    Please try:

    iframe, object, embed {width: 100% !important; max-width: 100%!important; }

    Please clear any cache plugin and your browser cache.

    Best regards,
    Mike

    January 9, 2018 at 1:08 am #895041
    Anton

    Thank you,

    but now the issue is with the height (check this or here)

    January 9, 2018 at 3:01 am #895052
    Mike

    Hi,
    Please try adding:

    .textwidget iframe {width: 100% !important; max-width: 100%!important; height: 210px!important;}

    Best regards,
    Mike

    January 10, 2018 at 4:40 pm #895728
    Anton

    Hi,

    the solution like height: 210px!important; is not convinient, coz the width (and thus the height) in the sidebar and footer is different. So it’s not adapted.
    height: auto; or max-height: auto; doesn’t work neither.
    Even if width: -webkit-fill-available; can replace width: 100% !important;, the same for height: -webkit-fill-available; doesn’t work.

    Any other ideas ?

    January 15, 2018 at 2:10 am #897290
    Ismael

    Hi,

    You can define the height of the footer and sidebar videos separately.

    .sidebar .widget_text iframe {
    height: 210px;
}

#footer .widget_text iframe {
    height: 300px;
}

    Adjust the value as necessary.

    Best regards,
    Ismael

    January 27, 2018 at 2:41 am #903608
    Anton

    Hi,
    as I already mentioned, defining the precise height in this particular case is NOT adapted. Because depending on the device showing the page the height and the width are obviously different, that’s why it is necessary to automatize the height of these i-frames.
    This is the actual code I use following your suggestions:

    /*Video Youtube footer and sidebar adjustment*/
iframe, object, embed {width: 100%!important;}
.sidebar .widget_text iframe {height: 180px;}
#footer .widget_text iframe {height: 220px;}

    This is convenient for a PC screen, but not for mobile and/or iPad screens.

    So, can you advise me how to automatize the height?

    January 29, 2018 at 5:45 am #904042
    Ismael

    Hi,

    You can use additional css media queries to alter the size values for different screen sizes.

    // https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Best regards,
    Ismael

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