- This topic has 9 replies, 3 voices, and was last updated 3 years, 7 months ago by Tom.
January 14, 2017 at 12:23 pm #264093Steig
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.January 14, 2017 at 2:02 pm #264123LeoStaffCustomer 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.January 14, 2017 at 3:23 pm #264130Steig
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.
ThanksJanuary 14, 2017 at 3:31 pm #264131Steig
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?January 14, 2017 at 3:43 pm #264134LeoStaffCustomer SupportJanuary 14, 2017 at 4:27 pm #264135TomLead DeveloperLead Developer
Should be this I think:
<div class="videoWrapper"><iframe src="https://www.youtube.com/watch?v=rQXKDrDfVj8" width="300" height="150"></iframe></div>January 14, 2017 at 4:40 pm #264137Steig
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’.January 14, 2017 at 4:55 pm #264139LeoStaffCustomer SupportJanuary 14, 2017 at 5:00 pm #264140Steig
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?January 14, 2017 at 6:40 pm #264152
- You must be logged in to reply to this topic.