[Support request] Responsive Video

Home Forums Support Responsive Video

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

    Hi Tom,

    I’m having trouble consistently getting youtube videos inserted responsively. I’ve followed your instructions and have the code in the SimpleCSS window.

    The problem is with the <div class="videoWrapper">https://youtube.com/videolinkhere</div> video wrapper.

    If I’m in the “text editor” mode and just type it, the preview page literally shows the url of the video in text.

    If I’m in the visual editor mode, and just copy/paste the video link URL into the editor window, the video will render and you can see the video sitting there. Great, but the div wrapper isn’t in place. I then switch to text editor and type it in and poof, video render is gone and the video URL shows in its place.

    While the video image is rendered properly, I’ve clicked on tools/source code and noticed that opening and closing paragraph markers were inserted in by the “system”.

    I didn’t know if somehow this plays a role in why it won’t render for me, so I put them on the outside of the div wrapper, but when saving, they are stripped out.

    So I’m stuck and don’t know how to make it work consistently. I say consistently, because once it did work through multiple times of just repeating the steps and I have no idea why and can’t replicate it.

    Appreciate your help.

    #264123
    Leo
    Staff
    Customer Support

    Is this the post you followed? https://generatepress.com/forums/topic/youtube-video-too-big/#post-158006

    Make sure you don’t miss the <iframe src="youtube..." /> part.

    Let us know.

    #264130
    Steig

    Hi Leo,

    I was following this: https://docs.generatepress.com/article/responsive-videos/

    will add iframe in. Would the correct syntax be:

    <div class="videoWrapper"><iframe src="https://youtube.com/videourl"></div>

    Will give that a try.
    Thanks

    #264131
    Steig

    I inserted the above code and pressed update. The system turned that code into this:

    <div class="videoWrapper"><iframe src="https://www.youtube.com/watch?v=rQXKDrDfVj8" width="300" height="150">

    So it added the width & height and removed the closing div.

    I edited it to put in the close div:

    <div class="videoWrapper"><iframe src="https://www.youtube.com/watch?v=rQXKDrDfVj8" width="300" height="150"></div>

    And the entire post won’t show. Not only the video, but all the text too.

    Is my syntax wrong?

    #264134
    Leo
    Staff
    Customer Support

    I think you are missing a / after height to close iframe?

    #264135
    Tom
    Lead Developer
    Lead Developer

    Should be this I think:

    <div class="videoWrapper"><iframe src="https://www.youtube.com/watch?v=rQXKDrDfVj8" width="300" height="150"></iframe></div>

    #264137
    Steig

    Inserting the iframe closure does allow the remaining text in the post to appear, but the video still doesn’t show.

    Inspecting elements shows the error: [Error] Refused to display ‘https://www.youtube.com/watch?v=rQXKDrDfVj8&#8217; in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’.

    #264139
    Leo
    Staff
    Customer Support

    Can you try it with the link Youtube provides when you click share instead of the one copy directly from the browser?

    #264140
    Steig

    I changed it from watch to embed and visually everything is fine. I do see errors saying protocols, domains and ports must match, but it works. So maybe its ok?

    #264152
    Tom
    Lead Developer
    Lead Developer

    Just make sure if your site is https:// that the iframe URL is as well.

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