Jump to content

Archived

This topic is now archived and is closed to further replies.

hansonexperience

fitvids.js not loaded?

Recommended Posts

hansonexperience+    8
hansonexperience

I am still working on the youtube video's to get them fluid and responsive into dms. Does not seems to work.

I saw a fitvids.js file which should do the trick I think but it seems not get loaded somewhere, somehow or do I have mistaken that?

 

Also saw this solution: http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/ which does not seem to work....

 

Somehow I get an youtube iframe of 500px by 281px in the blogpostings:

 

<iframe width="500" height="281" src="http://www.youtube.com/embed/p1lBOhKKwcg?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

 

I just enter the url link. 

 

Where the hell is this coming from when I inspect the element: 

 

iframe[Attributes Style] {

  1. width500px;
  2. height281px;
  3.  

Share this post


Link to post
Share on other sites
Danny+    1,327
Danny

That is the iframes default styling, for some reason whenever you add your video it sizes to that size. Also as far as I am aware, FitVid.js doesn't work out of the box with oembed only iframes.

 

Can you do me a favour and switch theme to either Twenty Eleven, Twelve or Thirteen and see if the video is the same size ? If it is remove it, whilst one of those themes are active and then oembed the video again and see what size it it. This way we can rule out if it a DMS issue, a WP specific issue or an issue with your videos.

 

I have just found an article which solves this problem, so that the script apprently works with oembeds too - http://designisphilosophy.com/tutorials/automatic-responsive-videos-in-wordpress-with-oembed-fitvids-and-a-little-php-magic/

 

I will speak to our devs and see if this can be included.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

Danny for some reason I cannot switch to another theme on local/blog on mamp other then pagelines themes. Do you know why and how to solve this?

I have installed a nick's child theme.

Also iblogpro cannot be viewed on localhost

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

In on older post I get code below and that is the right one:

 

 

 

iframe[Attributes Style] {
  1. width710px;
  2. height399px;

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

Ah found the trick already to load a theme. Disable all dms related plugins

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

Danny with twenty-eleven theme I entered just youtube url from an older video and I get this code in an older posting which is fluid to the theme and responsive as I scale my browser. Also when publishing a fresh new posting it is the same code with the same older video

 

 

iframe[Attributes Style] {
  1. width584px;
  2. height329px;

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

Danny did some more testing. I removed your code with 700 width and then the iframe code is as below, although 700 fits:

 

 

iframe[Attributes Style] {
  1. width500px;
  2. height281px;

 

The strange thing is when I click inspect elemant and go to the <p><iframe.....</p> part the iframe has the code as above but when I move my cursor just one line above iframe on <p> it says 710x286 and shows the exact box of what the video should be. But the video itself is much smaller. Strange. Seems that somewhere in DMS there is a bug. Twenty-eleven has fluid and reponsive video. When entering 700 width in functions.php I get a 700px width video.

 

So for now I put your code with 700px width back. 

 

The problem with the ugly bars is solved. It appeared that some video I produced had an intro produced with Motion which is 29fps and the rest of the video is 25fps. Apparently oembed/youtube cannot handle that.

 

Hope that the fluid/responsive oembed in DMS can also be solved.

Share this post


Link to post
Share on other sites
James B    436
James B

Have you tried the responsive video shortcodes that were in the framework previously? They still work inside DMS.

 

[pl_video type="vimeo" id="50522981"]

 

There's examples of both vimeo and yotube versions on http://demo.pagelines.me/tools/ about three quarters of the way down the page.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

James B Yes I tried and they work great. I use them right  now for the last few videos I published. But I want to use the standard oembed of wordpress so that in any chance I switch themes I do not have to change several hunderds of postings.

The oembed worked fine in Pagelines iblogpro with just entering the youtube url and getting a fluid and responsive video frame. And as show above in DMS this is not the case. It just publish for some reason a smaller frame then possible.

Share this post


Link to post
Share on other sites
Danny+    1,327
Danny

OK, so I have done some more digging and the video isn't showing smaller.  The default size of your oembed video is 500x281. Now Twenty Eleven has a the following code:

 

if ( ! isset( $content_width ) )
$content_width = 584;

 

When you remove this Twenty Eleven also sets your video to 500x281 - http://d.pr/i/VKqD

 

So when you add the code I gave you (which isn't my code by the way) your default video size will be the width of the value you enter. For example, I change the value of 584 in Twenty Elevent to 700, your video size will be 700x394 (if you change the default width of the content area in Twenty Eleven).

 

So if you want to have your videos set to a specific size, you will need to use the code I gave you previously and set this to the width of your content area.

 

Therefore, there is no bug in regards to your videos size and DMS and your video will act the same as in Twenty Eleven as long as you use the $content_width code.

 

FitVid.js as far as I am aware only works with iFrames. However, I have already provided you with a link which gives instructions on how to make it work with oembeds. I will also speak to one of our developers and see if this is possible.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

This should not be that hard. FitVids, fit videos to be responsive. You can use it on ANY element like videos and iframes.

 

Wrap ALL embeds in fitivids class to make an embed responsive.

 

That is literally all you have to do to get responsive video in PageLines.

 

<div class="fitvids">
EMBED code. NOT the url. the EMBED.

</div>


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

Danny thx. But why does DMS not use a fluid design according to the video? why 500x281 instead of the possible content area? Why do we have to enter the size in functions.php

Why does the twenty eleven them scale it to 584?

 

The code you provided me with works great !! Perhaps this could be put in dms?

 

The instructions you gave me for fitvids.js does not work out because you have to set the width to 0 as was possible in earlier versions of wordpress. But now you cannot do that anymore.

 

For now I am going to use the code you provided otherwise the frame will be 500 and that's too small in my layout. A pitty that the youtube oembed with url does not give fluid and responsive frame.

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

beardedavenger right it is not hard when you want to use the embed code. That works fine as the [pl_video] short code does. But I have several hundreds of video's on my blog which use the oembed with the url in place, so no the embed code. 

I want to use as less code as possible. ANd the oembed was ment to make it more simple for people.

Actually what I want is oembed without the [pl_video] shortcode.

Share this post


Link to post
Share on other sites
Danny+    1,327
Danny

OK, so just tried Nicks suggestion and wrapped a oembed URL with that div and the video is repsonsive.

 

I already told you above why Twenty Eleven scales them to 584, thats because the content area is set to that width and the $content_width code is also set to 584.

 

We can't add that code to DMS (as far as am aware), as it will be a fixed value and all users will likely have a different width. I will speak to our developers and see what they suggest. However, we have provided the responsive video shortcode and use FitVids for this reason.

Ill update this topic when I have more info.

 

Also see this forum topic, it may be useful for you to wrap all your videos with that code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny+    1,327
Danny

OK, did some more investigating and found this snippet of code, just tested it and it seems to work like a charm. What it will do is, whenever, you use an URL to embed a video it will automatically wrap that URL with the code Nick provided above.

 

add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
  return '<div class="fitvids">' . $html . '</div>';
}

 

Add it to your child themes functions.php file and let me know if it works for all your posts.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

Danny Great! I will give it a try!

Share this post


Link to post
Share on other sites
Danny+    1,327
Danny

OK, let me know if that works for you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

Danny yeas that works!!! Great. One thing which I think is not nice is that it first load the video as dms does so with 500 width and then widens to the new fluid responsive frame of fitvids. That takes 2 seconds

Share this post


Link to post
Share on other sites
Danny+    1,327
Danny

Yeah seen that and as Nick suggested, deactivate the editor and the video loads correctly, no mini version before hand.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny+    1,327
Danny

Try removing the $content_width code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
hansonexperience+    8
hansonexperience

you mean the code you provided? I already removed that

Share this post


Link to post
Share on other sites

  • Similar Content

    • pehja
      By pehja+
      https://pehjaproduction.se/webbdesign/  Video is not showing up in Journey section. Why? I have entered this in the settings 
       
    • stephen2
      By stephen2+
      Hey, 
      I'm using your plug-in Video Slider. Everytime I enter an end time for the video - hit save and refresh - the plugin crashes.  The only to use it again is to deactivate it, delete the affected section and start over. 
      Any ideas? 
      Stephen
       
    • todd@kitetails.org
      By todd@kitetails.org
      HI -   I've been having problems with MediaBox cropping a Youtube video I am trying to embed.   Regardless of the size of the video, the bottom is cropped out. This is also regardless of the "Disable Media Vertical Centering" function and "MediaBox Min Height" settings in MediaBox.   I've been using the "Text and Embed HTML" box to embed the video, using a Pagelines shortcode, [pl_video type="youtube" id="KxJlJ7NbYLY"]   Any possible ideas as to where I am going wrong?   Thanks in advance for the assist!   Todd
    • DanatTLFN
      By DanatTLFN
      Hello there!
       
      I'm a bit panicky this evening as I was just making a quick change to the top half of my page when the DMS decided to stop loading up.
       
      The steps I took before refreshing are as follows: 
       
      Added in a Masthead
      Embedded a YouTube Video into the Video field on the editing panel
      Refreshed 
      Began pulling hair out
       
      After this I went to troubleshoot it and have deactivated all plugins however the problem still persists with all plugins deactivated. I am pretty sure it is a something to do with the Masthead, however not being able to get in and remove that section, makes seeing a solution somewhat rather difficult.
       
      Anyway I shall look forward to hearing your response.
       
      PS. I am running DMS 2 
      GoDaddy hosting
      and 21 Plugins all of which I have mentioned in previous posts.
    • tirsbak
      By tirsbak
      Website URL: www.idphj.dk/e/k2
      Framework Version: 2.1.5
      WordPress Version: 4.0
       
      Helo
       
      I would like to use this trick on my site. But I can't figure out how to get it working. 
       
      http://www.skipser.com/p/2/p/youtube-video-embed-like-google-plus.html
       
      I have a few questions: 

      "First, download and add the following javascript file to the header section of your page."
       
      1) I have the file, but i don't know where to add it?
       
      Next you need to call the "optimizeYouTubeEmbeds" function that will make your YouTube video embeds like the Google+ one. To do that, add the following code just before the ending </body> tag of your page.
       
       
      2) Once again, I don't know where to add the script/code

      I hope that someone can help me :-)
       
×