Changing width of embedded YouTube videos

  • Posted in : Responsy WP
  • js_mlm
    Participant
    28 February 2013 at 21:43
    #3943

    Hi Mehmet,

    I’ve been embedding all the YouTube videos in my portfolio at the Responsy default size of 870 pixels wide. However, due to a separate issue I’m having with VideoPress files playing on mobile iOS devices, it looks like I need to change the width of all my portfolio videos, including those from YouTube, to 752 pixels wide.

    I have tried to do this within the YouTube embed code. Here is an example from one video:

    <iframe width="752" height="423" src="http://www.youtube.com/embed/G-nt7Uz5dZI?rel=0" frameborder="0" allowfullscreen></iframe>

    But the video continues to appear on the Portfolio page at 870 pixels wide. Do you have any ideas about how I can adjust the width?

    Thanks again,

    Jerome

    ahmetsali
    Keymaster
    28 February 2013 at 23:55
    #3947

    Hi, can you provide a url to see what’s wrong?

    ahmetsali
    Keymaster
    1 March 2013 at 00:39
    #3948

    Try this custom css and see if it it works for you;

    .portfolio-single .video-container { max-width: 752px; }
    js_mlm
    Participant
    1 March 2013 at 01:54
    #3952

    Awesome. Thanks!

    js_mlm
    Participant
    2 March 2013 at 03:42
    #3991

    From time to time, I need to embed YouTube videos on Pages as well, not just within my Portfolio (when I’m showing clients rough cuts of their videos). Would a variation of the CSS code that you wrote for Portfolio items also work for Pages? Could I do something like:

    .page-single .video-container { max-width: 752px; }

    Otherwise, I would need to use YouTube’s standard HTML embed code, and specify the exact width, which would mess up viewing on mobile devices.

    Thanks!

    ahmetsali
    Keymaster
    4 March 2013 at 14:32
    #4020

    the custom css code below will work for videos on all pages;

    .video-container { max-width: 752px; }
    js_mlm
    Participant
    4 March 2013 at 16:59
    #4024

    Hi Ahmet,

    Unfortunately, that didn’t work for me. I added the CSS code, and created a test page to show you. Here’s the link:

    http://motionlifemedia.com/about/youtube-test-page/

    I tried it two ways, with the “full width page” template and the “infinite sidebar” template.

    Would it be at all possible to have something like you have in the Portfolio template, which allows for “Item Details” and then “Video”? I’m guessing that would be impossible, but maybe there is another way to add a video container within a Page so that YouTube videos will resize automatically in iOS.

    Thanks again,

    Jerome

    ahmetsali
    Keymaster
    6 March 2013 at 23:53
    #4082

    You need to use inline_video shortcode wherever you insert videos

    [inline_video]Put your iframe code here.[/inline_video]
    js_mlm
    Participant
    7 March 2013 at 06:57
    #4106

    I didn’t have any luck with that either, I’m afraid. I ended up stumbling across a plug-in called “Responsive Video Light,” which seems to be doing the trick. The videos are now responsive on Posts and Pages, not just in the Portfolio! Thanks again, Jerome

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘Responsy WP’ is closed to new topics and replies.