Responsive Video

[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.

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[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?

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

Should be this I think:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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’ in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’.

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts