Embed YouTube Video in Word Press

Please see https://www.youtube.com/channel/UCGCQmRrFdS7BnXqjyVcOUbg

I want to take the two video thumbnails & put them into a WordPress site (in the size they are at there), then when one is clicked, play the video full size on the site without going to the You Tube site.

How do I do that?

Thanks
Richard KortsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
I would look into the Easy Modal plugin:

https://wordpress.org/plugins/easy-modal/
0
Richard KortsAuthor Commented:
Jason C. Levine,

You are suggesting I use this to "pop up" the You Tube video "on" the page?

Thanks
0
Jason C. LevineNo oneCommented:
Correct.  Apply the modal to the thumbnails, embed the video in the modal.
0
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

Richard KortsAuthor Commented:
Lets back off, I am now just trying to get the (2) YouTube videos to play AT ALL in the site; seems impossible. Maybe I should open another question.

In SEVERAL references I found on the web, it says "just copy the url from YouTube into your Word Press text. It does the rest".

That is TOTAL crap. See attached. Image 1 is the text I created. Image 2 is the site preview.

Preview is of course obviously what I don't want.

Any ideas??
Image1.jpg
Image2.jpg
0
Jason C. LevineNo oneCommented:
Okay, so if you copy the YouTube url into WordPress, you have to paste it in the Visual part (not the text part) of the editor and preferably place it by itself on a line.

Try that, see if you get the video to embed.
0
Richard KortsAuthor Commented:
See attached. image5 is the preview, image6 is the editor.

FYI, I want them horizontal (on the same line), Not stacked vertically.
Image5.jpg
Image6.jpg
0
Jason C. LevineNo oneCommented:
That's weird, I wonder why it isn't working for you.

This page (warning: intraoperative surgery videos/images may not be safe for lunch) uses three embeds via the above method and I use it all of the time.

What version of WordPress are you using, what plugins are installed?
0
Richard KortsAuthor Commented:
I don't know what version, I can't figure out how to determine that. However, see image7. I guess they want me to go to 4.1 which I am reluctant to do for fear of COMPLETELY screwing up the site, no telling the consequences.

See attached plugins1 & plugins2.
Image7.jpg
plugins1.jpg
plugins2.jpg
0
Richard KortsAuthor Commented:
To Jason C. Levine

This suggests using the iframe embed technique: https://www.youtube.com/watch?v=O4THpbKZ0Zg

I think I've done that on normal HTML sites previously & it worked well.

Maybe I should try that?
0
Jason C. LevineNo oneCommented:
This suggests using the iframe embed

You certainly can try it.  Very occasionally some themes alter the visual editor to disable iframes but I doubt that's in place.

To find out which version of WordPress you have, you can look at the Dashboard and see if the "At a glance" metabox is present.  It will report the version.  If it's not present, then go to Screen Options from the Dashboard and enable it.

My guess (and based on your comments re: upgrading) is you're running an older version of WordPress and the simple URL-to-embed isn't there.  There's nothing in your plugins that should alter the behavior of the visual editor.  Your reluctance to upgrade the core is kind of misplaced...the WordPress core is stable.  What "breaks" between versions is poor/sloppy coding found in themes/plugins by people who are in full DGAF mode about standards.  When you are new to WordPress, the tendency is to install whatever you find that does the job at the time you need it and you are not as savvy about what's a good theme/plugin and what isn't.  Over time, you learn what is stable, what breaks, and who keeps their repos up to date.

A good resource to start this process (for plugins) is Tidy Repo:

http://tidyrepo.com/
0
Richard KortsAuthor Commented:
Current version is 4.0.1. Based on your comments, I'll upgrade to 4.1

Thanks
0
Jason C. LevineNo oneCommented:
No, that won't solve the embedding issue, then.  4.01 is more than recent enough.
0
Richard KortsAuthor Commented:
To Jason C. Levine

I did the iframe. In visual mode it doesn't work. In text mode, it does!

Like this:

<h4 style="text-align: center;"><strong>Watch Our Videos</strong></h4><br>
<iframe src="//www.youtube.com/embed/L0x_bnlK6ew" allowfullscreen="" frameborder="0" height="253" width="450"></iframe>&nbsp;<iframe src="//www.youtube.com/embed/Ql8_GcE9-sg" allowfullscreen="" frameborder="0" height="253" width="450"></iframe>

I made them narrow enough that they would fit on one line.

I'll give you a link to the finished product.
0
Jason C. LevineNo oneCommented:
I did the iframe. In visual mode it doesn't work. In text mode, it does!

Yeah, iframes are HTML code.  You have to enter them in the text portion.
0
Richard KortsAuthor Commented:
One more thing.

I CANNOT get text to align in a title row underneath the Video links.

Here is the text:

<h4 style="text-align: center;"><strong>Watch Our Videos</strong></h4>
<iframe src="//www.youtube.com/embed/Ql8_GcE9-sg" allowfullscreen="allowfullscreen" frameborder="0" height="253" width="450"></iframe>&nbsp;<iframe src="//www.youtube.com/embed/L0x_bnlK6ew" allowfullscreen="allowfullscreen" frameborder="0" height="253" width="450"></iframe>

<p style="text-align: center;">[one_half]Irrigation[/one_half][one_half]Drainage[/one_half]</p>

The words Irrigation & Drainage are left justified. Why are they NOT centered?

WordPress is INCREDIBLY frustrating.
0
Jason C. LevineNo oneCommented:
The words Irrigation & Drainage are left justified. Why are they NOT centered?

Can't tell without a live site to look at but it probably has to do with the shortcode you are using to attempt to align the text.  The shortcode evaluates to CSS/HTML so look at the rendered page with the browser's Inspect Element tool to see if the inline style on the p is being overridden.

WordPress is INCREDIBLY frustrating.

Misplaced.  WordPress itself isn't your issue here.  Your issue is most likely the theme or plugins you are using to speed up your development.  Relying on shortcodes and plugin-generated formatting to do things for you leaves you open to interactions and conflicts like this.
0
Richard KortsAuthor Commented:
I have no clue how to do the browser "inspector". I did it, saw nothing I could interpret related to align center.

Can you see it here? http://rain1.com/new-site/

Note the title across the top (Watch Our Videos). That was done with this line:

<h4 style="text-align: center;"><strong>Watch Our Videos</strong></h4>

Why is that style NOT overridden?

How do you suggest I center those annotations UNDERNEATH the videos?
0
Jason C. LevineNo oneCommented:
I have no clue how to do the browser "inspector". I did it, saw nothing I could interpret related to align center.

Clear as day to me:

Firefox inspect element
So the pale yellow sections above represent the caption text after the shortcode evaluates.  The short code creates divs around the text (see the HTML below the images) and sets those divs to 45% of the width with a 5% right margin (see the CSS rules lower right).  The dotted lines are the div outlines so you can see where things are supposed to be.

Your original entry in the WordPress editor was:

<p style="text-align: center;">[one_half]Irrigation[/one_half][one_half]Drainage[/one_half]</p>

Open in new window


which is now a problem because you can't place a <div> inside of a <p>.  So when the shortcode renders, your centering <p> tag is moved outside of the divs and doesn't do anything.  

Even if we were to assume that the text centered anyway, it still wouldn't center below the videos because the videos themselves are not in the columns created by the shortcodes.

How do you suggest I center those annotations UNDERNEATH the videos?

Test it, but I think you can just follow the above to its logical conclusion.  Put the videos and text inside of the shortcodes, then center the text there.

[one_half]
   <iframe src="//www.youtube.com/embed/Ql8_GcE9-sg" allowfullscreen="allowfullscreen" frameborder="0" height="253" width="450"></iframe>
   <p style="text-align: center;">Irrigation</p>
[/one_half]
[one_half]
   <iframe src="//www.youtube.com/embed/L0x_bnlK6ew" allowfullscreen="allowfullscreen" frameborder="0" height="253" width="450"></iframe>
   <p style="text-align: center;">Drainage</p>
[/one_half]

Open in new window


So the above has line breaks added for readability, but you will probably want to remove them when you copy/paste into the editor.  Also note that the <p> tags will center relative to the div, not the iframes so you will probably want to adjust your CSS to center any iframes found in .one_half as well.  Otherwise the text will probably still look a look a little off-center because the iframes will be left aligned without that fix.

Note the title across the top (Watch Our Videos). That was done with this line:
<h4 style="text-align: center;"><strong>Watch Our Videos</strong></h4>
Why is that style NOT overridden?

Because you didn't wrap it in the shortcode, so it rendered as entered.  So I would reiterate, the problem here isn't WordPress so much as your theme and your not quite seeing how everything interacts.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsAuthor Commented:
Excellent, thanks for all your help.

The customer says: "Are you able to center the embeds vs. the title and the subtitles?"

Can I "center" the content of the iframe? He sent me an image (I see I can't add an image to award comments, I'll put in in another post to this).

Thanks
0
Richard KortsAuthor Commented:
0
Jason C. LevineNo oneCommented:
Can I "center" the content of the iframe?

Yes, with CSS.

You would probably need to add something like this:

.one_half iframe {
       display: block;
       margin: 0 auto;
}

Open in new window


to your main CSS file for the theme.  Remember, iframe stands for "inline frame" and inline elements cannot be centered.  So we have to declare our iframes as blocks so we can then center them.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.