- This topic has 9 replies, 3 voices, and was last updated 4 years, 1 month ago by
Tom.
-
AuthorPosts
-
January 14, 2017 at 12:23 pm #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.
January 14, 2017 at 2:02 pm #264123Leo
StaffCustomer SupportIs 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/January 14, 2017 at 3:23 pm #264130Steig
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.
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 #264134Leo
StaffCustomer SupportI think you are missing a
/
after height to closeiframe
?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 14, 2017 at 4:27 pm #264135Tom
Lead DeveloperLead DeveloperShould 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-developmentJanuary 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 #264139Leo
StaffCustomer SupportCan 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/January 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 #264152Tom
Lead DeveloperLead DeveloperJust 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 -
AuthorPosts
- You must be logged in to reply to this topic.