Video width in portfolio project

Mauer Themes Support Bild Video width in portfolio project

This topic contains 9 replies, has 3 voices, and was last updated by  Paul 12 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1771

    olafval
    Participant

    I really love that create WP-theme and it’s pretty easy to embed Vimeo videos.
    One question: If I embed a video to a portfolio project, it appears in small width alining to the text width. Would it be possible to show the video embeds in the same width as the photo gallery or cover image?

    #1779

    Paul
    Keymaster

    Hello Olafval,

    I’ve checked the theme. And actually it makes the videos wider than the text column — it makes them as wide as galleries. Please see a test page here: http://bild.mauer.co/video-embed-test
    The behavior in Portfolio projects is the same.

    If I understand you correctly, in your case the videos are being displayed the same width as the text column.

    Please do the following:

    1. Create a new page. Don’t put it on the menu so that your visitors don’t see it.

    2. Go to the Text mode of the editor and insert this exact content: https://bit.ly/2HoutCe

    The result should look like what you see in the screenshot below. Again, make sure you are using the Text mode (not the Visual) before you paste the text.

    3. Send me the link to that test page here.

    This will help me understand what is causing the issue.

    Kind regards,
    Paul

    #1789

    olafval
    Participant

    Hi Paul,
    Thank you for your kind reply.
    Updating the WP-Theme (from 1.0 to 1.1) solved the problem.
    Sorry – I didn’t think of that in first place.

    Best regards
    Olaf

    #1798

    Paul
    Keymaster

    You’re very welcome Olaf!

    Thank you for having chosen Bild for your project.

    Regards,
    Paul

    #1991

    pietrofrapoli
    Participant

    I also have this problem with my website with Bild theme.
    Did you find a solution for that?

    #1994

    pietrofrapoli
    Participant

    I think that is because the iframe does not fit in to the “div class entry-content” but it goes up to the “div class row” or “”div class container”. Do not know which one..

    Any suggestion?div class entry content

    #2056

    Paul
    Keymaster

    Hello Pietro,

    Olaf actually had a different question. His videos were appearing the same width as the text column, and he wanted them wider. Whereas you are talking about the map being wider than the text column.

    So that’s quite the opposite.

    Anyway, the maps (as any other iframe) were designed to be wider than the text, as galleries and videos are. This is done on purpose. Here is how they are supposed to work:

    Test page for the galleries
    Test page for the videos
    Test page for the maps

    They are wider only on desktop resolutions. On screens that are narrower than 768px, the iframes become the width of the text column (you can resize your browser to see this in action). Again, that was designed to be this way.

    1. So do I understand you right that you want your maps to always be the width of the text column?
    2. Do you also want your videos and galleries to always be the width of the text column?

    Regards,
    Paul

    #2058

    pietrofrapoli
    Participant

    Hi Paul, thanks for replying.
    Yes I actually would like it to be the same width of the text column (mostly for videos and maps embed, maybe not for galleries).

    I thought it was not supposed to be like that because I ve seen in some example of yours that it was the same width of the text column.

    #2059

    pietrofrapoli
    Participant

    Actually in this page WEBSITE I placed and image and that is the same width of the text, but the embed iframe I had to make some trick that is not working properly, as it crop the content.

    #2098

    Paul
    Keymaster

    Pietro,

    You can restrain videos and maps (as well as any other iframes) to the width of the text column by removing the following chunk of code:

    See screenshot

    To remove it you can go to “Appearance” > “Editor”, select “js” > “general.js” on the right (see it in the screenshot), navigate to line 324 (line number may vary depending on theme version). Select the code you see in the picture, erase it and click “Update file”.

    You may need to clear your cache to see the changes on the front-end.

    A little disclaimer: It’s best to do such customizations in a child theme or a custom plugin, so they do not get overwritten during theme updates. However, of course, you can always re-introduce them after a theme update.

    Regards,
    Paul

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.