Embedding a Video in a Page

[rio9]

I would like to be able to embed a video into the body of a Page. I can’t seem to figure out how to do it. I tried this, and it didn’t work. I also tried inserting media and that did work either.

[sub_headline title=”How do you play Preppin?” desc=””]
<iframe src=”//player.vimeo.com/video/60614337″ width=”500″ height=”281″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Do I have to create a post instead of a page in order to be able to embed a video?

[FocuxTheme Support]

Have you switched the editor mode to “text” mode before you insert the embed code? If not , just do it.

[rio9]

That worked! Thanks you!

How do I center the video on the page, instead of it being left justified? Also, I noticed on the mobile site, videos do not scale to fit in the browser. Is there a way to fix that?

[FocuxTheme Support]

I would like to answer the second question first, you’d better set the width of video to be a percent value(don’t use fixed value), eg,

<iframe width="80%"></iframe>

For the first question, put all video code bewteen [center]….[/center] shortcode, and set width arument to be as same as the video width, e.g.

[center width="80%"]
<iframe  src="..." height="498" width="510" allowfullscreen="" frameborder="0"></iframe>
[/center]

[rio9]

Thanks. This worked for centering the video, but did nothing for scaling on the mobile site. Looks exactly the same mobile wise.

This is the code I put in, did I do it right?

[center width=”80%”]
<iframe src=”//player.vimeo.com/video/60614337″ width=”700″ height=”393″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
[/center]

[Musama]

i think because the iframe width is “700” try to set the iframe width=80% Good luck

[FocuxTheme Support]

Yes, as Musama said, you must set width of iframe to 80% at the same time.

[rio9]

I tried this, and it still comes up incorrect. Here’s what it looks like now.

http://nightofthesaucers.com/wp-content/uploads/2013/09/video-example.png

My code looks like this.

[center width=”80%”]<iframe src=”//player.vimeo.com/video/59460890″ style=”width:80%;height:auto;” allowfullscreen=”” frameborder=”0″></iframe>[/center]

[FocuxTheme Support]

Try again.

[center width="80%"]<iframe src=”//player.vimeo.com/video/59460890″ style=”width:80%;height:auto;min-height:400px;” allowfullscreen=”" frameborder=”0″></iframe>[/center]

You can set min-height value by yourself.

[rio9]

I copied and pasted this. There is no change.

[FocuxTheme Support]

I tried again and founf the solution.

Try the following HTML

[center width="80%"]<iframe src="//player.vimeo.com/video/59460890" width="80%" height="450" allowfullscreen="" frameborder="0"></iframe>[/center]

And put the following CSS in to “OldCar options > Custom Code > Custom CSS”

@media all and (max-width: 480px) {
   iframe{height:200px;}
}

I will also improve this issue in next version.

Thanks!

[rio9]

Thanks! That worked, I did have to change the height at 339px to fit proportionately though.

[FocuxTheme Support]

OK, that’s great!

[rio9]

Hey Guys,

I hadn’t checked my site on an iPhone till yesterday and noticed that the videos display like this on iPhones.

http://www.imphouse.com/wp-content/uploads/2013/09/photo-1.png

Any ideas how to fix it?

I also noticed that on computers, the videos still aren’t quite centered, they are better than they were, but still not centered with the paragraphs and titles. I assume thats something that will be fixed in future versions, but I wanted to give you a heads up.

http://www.imphouse.com/mischief/armageddon-preppin/

[Musama]

hi try this line of code

[center width="100%"]<iframe src="//player.vimeo.com/video/59460890" width="100%" height="420" allowfullscreen="" frameborder="0"></iframe>[/center]

[rio9]

Now it looks like this on the computer.

http://www.imphouse.com/wp-content/uploads/2013/09/Screen-Grab.png

And this on the iPhone.

http://www.imphouse.com/wp-admin/post.php?post=854&action=edit

[Musama]

which one because there is 2 videos the first looks ok for me in all devices

[rio9]

The first one is the one I did with the new code. The second is how the code was previously.

[rio9]

And they don’t look okay on mine because they have black bars on the left and right side of the video. The second one appears fine without the bars, but its not centered on the screen with the paragraphs. It’s off to the left.

I also noticed now on iPhones, that the videos are showing cut off on the right side of the screen.

[rio9]

Here’s a screen grab from my computer.

http://www.imphouse.com/wp-content/uploads/2013/09/example.png

[Musama]

and now

[center width="100%"]<iframe src="//player.vimeo.com/video/59460890" width="100%" height="530" allowfullscreen="" frameborder="0"></iframe>[/center]

[rio9]

Yes! That fixed it.Thank you!

I also sort of figured out part of the problem with the iPhone. Before clicking a video to play, if you are looking at the site with the phone turned Portrait the videos appear to have black borders at the tops and bottoms. But if you turn the phone to Landscape, the videos look fine with no black bars.

So the videos look great and centered now, but still weird on iPhones when looking at the site in Portrait view.

[Musama]

this is the best we can do now but sure we will fix it in the next version it will be available soon. Thank you

[FocuxTheme Support]

Yes, I have already recorded this issue on the update list.

[Author]

Posts