Placement of video's in post

Posted in: Newspaper
Post count: 161

Hi there,

I’ve noticed that the youtube and vimeo videos are placed above the post content. I tried to change it, but the post lay-out can’t be changed in single.php. The file doesn’t have the conventional structure, compared to most other themes. I would really like the video to show beneath the content. Can you please help me out with this? And how can i put multiple videos in one post? Is there some sort of shortcode? If i use the iframe embed code provided by youtube, the video won’t be responsive. If so, it is possible to use the youtube thumbnail generated by the theme without having the video show up in the post?

I also would like to add my AdSense code above and beneath the content of my posts. Normally i just edited the single.php file and pasted the codes, but since i’m not familiar with this kind of coding in the single.php i’m not sure where to put it.

Since we’re on the topic of the single.php file, i would like to use two comment boxes, a plugin from Disqus, and the facebook comment box. The Disqus plugin replaces the wordpress comment box, so i need to add the facebook comment box code myself. Again, i normally pasted the code in the single.php file, but i have no idea what to do with this single.php file as it has a different structure than most themes.

I really hope someone can help me with this.

Post count: 9544

You can place videos anywhere in your post, as this is a normally supported function of WordPress via oembed. You only have to place video on top if doing “featured video” which is useful when you don’t have a photo (really only reason to do that, or if you had something like a music video gallery).

Always good idea to check all the wonderful tutorials provided by WordPress on how to use WP, such as how to insert videos:
how-to embed videos on ANY WordPress site regardless of theme:
http://codex.wordpress.org/Embeds#In_A_Nutshell

basically all you do is in your post do

check out this cool video
http://youtu.be/videoID

here is example of how we do this on our site
http://ga-ga.com/1245/stone-solid-hooks-reflections-da-blooze/

so, upshot you only “have to” have video on top when you choose the featured video template; otherwise just do normal post, and drop in your videos anywhere you want in text.

Here is an example where we put two videos at bottom of article:
http://ga-ga.com/1125/musical-high-verheyen-studio-great-carl-verheyen-consistently-wows-crowds/

Hope that helped. ๐Ÿ™‚

As to using both DisQus *and* the FB comment box; I would *not* advise that since Disqus can support login via Facebook, you will need to likely avoid that option, otherwise you might get two “call backs” to FB and this will kill your site loading time and PageSpeed, if you care about that. It it works, would love to see it! ๐Ÿ™‚

Post count: 3343

Hello,
You can embed video just paste the video URL in your post like this http://www.youtube.com/watch?v=wXkNHF1FinQ and will be responsive

Here we have a tutorial how to add an ad above and at the bottom of the post https://forum.tagdiv.com/how-to-add-ads-in-front-of-and-behind-the-contents/

Hope this help.

Thanks @Christopher for your support.
Merry Christmas!!!

Post count: 161

Merry Christmas to you both too!

I know how to embed videos the regular way, i’m not a total noob ๐Ÿ˜‰ I managed to edit the embed code that is used when showing it as featured video, so that it will start in HD and won’t show annotations and related video’s at the end.

If someone is interested, here’s the code.
Replace line 157 in includes/class/td_video_support.php with this:
<iframe width="600" height="560" src="http://www.youtube.com/embed/' . $this->getYoutubeId($videoUrl) . '?rel=0&?wmode=transparent&iv_load_policy=3&vq=hd1080' . $this->getYoutubeTimeParam($videoUrl) . '" frameborder="0" allowfullscreen=""></iframe> The code’?rel=0&?wmode=transparent&iv_load_policy=3&vq=hd1080′ is the part that does the trick, so the rest of the code will not be edited.

Marius, i’ve already noticed that it will automatically put the normal youtube link in an iframe and that the embed code provided by youtube will also automatically be put in a different iframe. These iframes will force the video to be shown in a 100% width and style=”height:420px”. The featured video comes with a 600 width and 560 height (as can be seen in the code i mentioned above), the embedded video comes with a 600 width and 394 height. However, these heights are forced to 420px because of the style code. Now here’s my question: I don’t know why, but on my other site the embedded video’s will hide the buttom pause/play and options, as can be seen here:
http://www.mannenhumor.com/magazine/stunten-op-een-wielrenfiets.
On the my new site using the Newspaper theme, these functions on the bottom stay visible when the video is playing. I don’t know why, but i think it might have to do something with the height. I tried to find differences in the embed code using the debug tool, but i can’t find them. So how can i edit the height of the iframe that is used by your theme? I can’t seem to find where this style height is set… Is it a css file somewhere? I feel a bit stupid for asking.

Now here’s another question. The iframes forced by the theme don’t use the code as i mentioned above. Where can i find this piece of coding, i would like to add ‘?rel=0&?wmode=transparent&iv_load_policy=3&vq=hd1080’ to it so my bloggers can simply put the youtube link in a post without having to put this code behind every youtube video manually.

As for the fb and disqus comment system, i’ve managed to use it on my other sites. Those use the Avada theme, which is a REALLY slow theme regardless of the double comment system, so i don’t know if it will cause a decrease in page speed. I do know a site that uses them both and their page loads quick enough if you as me. See for yourself here (don’t mind the content, it’s a Dutch site): http://www.vkmag.com/magazine/kind_krijgt_stofzuiger_als_kerstcadeau

  • This reply was modified 12 years by r1kay.
Post count: 9544

Hi, just as an aside the site with both comment systems has an awful Google PageSpeed score of “73” which having both comment systems impacts. On the other hand, if it’s a way to interact with audience, why not? Just be aware that’s an awful experience for mobile users waiting for both systems to instantiate. ๐Ÿ™‚

Post count: 45

Hoi @r1kay

I just changed from Avada (a complete waste of money for a two week slug speed moving horror experience) to Newspaper because of the lack of speed.

Just by making the switch I doubled the speed at Google speed insights. It’s not optimized just yet but rapidly getting there.

However if you’re looking to increase speed in general I’d recommend you to not only stay away from Avada but also from Disqus (which I personally love cause of functionality) cause it really slows down sites no matter what ๐Ÿ™

Post count: 780

@r1kay hello,
in the latest update – the one from 23 I’ve changed the code that re sizes the videos. Now all the videos all full responsive even on re size, device rotation etc. To change the ratio of the videos you can try here in this file: http://screencast.com/t/YXPkqBSXQ
basically the height is 0.6 * video width.

I tried to make them smaller in height but he controls are not hiding. This issue is even with the default wordpress embeds… so I don’t think it’s from us.

Radu from tagDiv

Post count: 161

Thanks for the replies!

I won’t use the show featured video/image on post function so will embed the videos manually, which raises another problem. I add a lot of parameters to youtube embed codes (as mentioned in my first post) to hide annotations and related videos and other stuff. Now here’s the problem: I have a lot of bloggers and I want to make it as simple as possible for them to embed video’s. The easiest way is to let them just paste the link in the post and let the WordPress oEmbed function insert the HTML embedded iframe. However, oEmbed does not add those parameters to the embed code, it just inserts a regular embed code that looks like this:
<iframe width="100%" height="394" src="http://www.youtube.com/embed/-McFIAlP0Ow?feature=oembed" frameborder="0" allowfullscreen="" style="height: 420px;"></iframe>

Can someone tell me what code I need to add to the WordPress oEmbed function (wp-includes/class-oembed.php) so it will result in this HTML output:
<iframe width="100%" height="394" src="http://www.youtube.com/embed/-McFIAlP0Ow?feature=oembed?rel=0&?wmode=transparent&iv_load_policy=3&showinfo=0&vq=hd1080" frameborder="0" allowfullscreen="" style="height: 420px;"></iframe>

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic.