Youtube Embed and Google Maps embed are posting too wide

Mauer Themes Support Essentialist Youtube Embed and Google Maps embed are posting too wide

Tagged: 

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

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

    MStewart
    Participant

    Hi there!
    When embedding a Youtube video via pasting the URL into the content window, or posting a Google Maps embed code via <iframe>, both the video and the map are appearing in the post as wider than the block of text and are not resizeable no matter what I try.

    Do you have any suggestions?

    Thanks!

    #1722

    Paul
    Keymaster

    Hello Maura,

    I’ve set up a little test for the Google Maps iframe. Here it is: http://essentialist.mauer.co/google-maps-iframe-test

    And here is the exact code I’m using in this test page:

    <iframe
      width="100%"
      height="450"
      frameborder="0" style="border:0"
      src="https://www.google.com/maps/embed/v1/place?key=THE_API_KEY
        &q=Space+Needle,Seattle+WA" allowfullscreen>
    </iframe>

    (I’ve removed the API Key when posting the code here)

    Please mind that I’ve set up the width parameter to be 100%.

    The map inserted with this code does not seem to produce any issues.

    Also, make sure to insert your iframe code in WP editor’s ‘Text’ mode (not ‘Visual’).

    As for YouTube, here is a test page for YouTube and Vimeo: http://essentialist.mauer.co/responsive-video-embeds/

    It just has the URLs dropped into the WP editor (the actual URLs copied from the browser address bar). Here is how this looks on the back end (in ‘Text’ mode, not ‘Visual’):

    Please try the Google code above, and try inserting the videos the way shown here, and let me know if this works for you.

    Regards,
    Paul

    #1740

    MStewart
    Participant

    Hi Paul,
    Thanks for your reply!

    Unfortunately, neither seems to be working. They both load much wider than the text width on the page and end up far too large. We disabled plugins to see if any of them were the issue, but nothing has helped.

    Any other advice you have would be wonderful!

    Thanks!
    Maura

    #1742

    Paul
    Keymaster

    Okay, let’s try the following:

    Please create a new page (not post) on your website (make sure not to add it to the menu, so it remains unseen to your visitors).

    When creating this page, make sure to use text editor (not visual). The switch is in the upper right corner of the editor. You can see it in the screenshot above.

    Once in text mode, copy the exact text from here and paste it tou your page:

    Here is a test of a Google Maps iframe: 
    
    <iframe
      width="100%"
      height="450"
      frameborder="0" style="border:0"
      src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBzvKEnCpME0iQBbsxEyqCs9-xJtktpD3I
        &q=Space+Needle,Seattle+WA" allowfullscreen>
    </iframe>
    
    He always thought of the sea as la mar which is what people call her in Spanish when they love her. Sometimes those who love her say bad things about her but they always speak of the sea as though she were a woman. Some of the younger fishermen, who had motorboats, speak of her as el mar which is masculine. They speak of her as a contestant or a place or even as an enemy. But the old man always thought of her as feminine and as something that gave or withheld great favors, and if She did wild or wicked things it was because she could not help them. The moon affects her as it does a woman, he thought.
    
    Here is a test of YouTube embed:
    
    https://www.youtube.com/watch?v=FniPoPixipY

    Then send me a link to that page.

    Regards,
    Paul

    #1750

    MStewart
    Participant

    Great!

    Here’s the page: http://afterwhitsett.com/google-maps-test/

    Although we’ve been attempting to embed within posts, it seems they aren’t working on our pages either.

    Thank again for your help!
    Maura

    #1751

    Paul
    Keymaster

    Thank you, Maura

    Here is how the exact same content looks on a clean theme install: http://essentialist.mauer.co/google-maps-iframe-test/. The map and the iframe are contained.

    So there is something different in your installation. Can you please disable all plugins (except for Advanced Custom Fields Pro), and see if the issue persists?

    Also, did you perform any modifications to the code of the theme?

    #1761

    MStewart
    Participant

    Hi Paul,
    I disabled all the plugins (except for Advance Custom Fields Pro, which I have not been able to update since I don’t have the purchase key). I also re-downloaded a new theme zip file and activated it. The only edits we made were to include the CSS you
    recommended in another thread for menu hovering.

    Unfortunately, the issue doesn’t seem to be resolved.

    We removed Jetpack from our site as it was causing incredibly slow site speeds. Could that have an impact on how videos display?

    Thanks!
    Maura

    #1762

    Paul
    Keymaster

    Maura, can you please send your WP Admin credentials to pavel@mauer.co, so I can take a closer look at the issue and probably fix it?

    #2037

    mikerastiello
    Participant

    Was this ever resolved? Because I am having the same issue.

    #2094

    Paul
    Keymaster

    Mikerastiello,

    If you prefer your inserted videos and maps to be the width of the text frame, please drop me an email with your WP Admin credentials to pavel [аt] mauer.co, and I’ll do this for you.

    Regards,
    Paul

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

You must be logged in to reply to this topic.