Home Forums Weaver Xtreme Theme How do I limit the size of a YouTube video?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #18362
    annieb
    Participant

    I’ve been trying to add and resize a Youtube video but I’m going around in circles. My video is resized to the full width of my page but, because it’s only a standard definition video, it doesn’t look very good on the page.

    I’ve been reading about shortcodes but I’m struggling to implement them correctly. In fact I have no idea where to start. Perhaps I need the Pro version for this, I’m not sure.

    I’ve embedded the YouTube embed code in the text editor but the sizes are not respected when the video is displayed.

    The embed code looks like this…

    <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/…………&#8230;.?rel=0″ frameborder=”0″ allowfullscreen></iframe> (I’ve removed the actual video’s id)

    I substituted width=”530″ for max-width=”560″ but this doesn’t work.

    Please could somebody enlighten me on the exact syntax I need to use to limit the width of a video. I still wish it to be responsive but to have a maximum size.

    #25026
    annieb
    Participant

    Further to my previous post, I’ve managed to find the instructions on the Weaver Xtreme Support plugin documentation page.

    “However, the instructions say “percent=100 – By default, the video will be sized to fill the full content space. You can use the percent value to make
    the video use a percentage of the content space (but mobile will always use full width).”

    I’ve managed to resize the video to 70% but it does exactly the same on my mobile phone and tablet (ie. it’s not full width).

    Here’s a link to a test page: http://www.ambwebdesign.co.uk/wordpress/video-test/

    This is my shortcode… [youtube id=UE0jQaENsW8 rel=0 percent=70]

    Is there a way to set a maximum width in pixels rather than a percentage? If not, how do I overcome the mobile problem?

    #25027
    scrambler
    Moderator

    read item #4 of the thread below

    http://forum.weavertheme.com/discussion/12527/weaver-xtreme-tips-and-tutorial-part-7

    On how to use the max-width instead of %

    #25028
    annieb
    Participant

    I took a look at the thread and placed the following code into the Custom CSS Rules box but it doesn’t seem to work.

    .page-id-4972 .wvrx-video {max-width:450px;}

    My shortcode is…

    [youtube https://www.youtube.com/watch?v=UE0jQaENsW8 https=0 rel=0]

    (Edit: apolgies the code above won’t format in this forum properly.)

    I’m using a child theme so, after this didn’t work, I thought I’d try it a different way. Therefore I placed the code into the style.css file but this didn’t work either. What am I doing wrong?

    #25029
    scrambler
    Moderator

    You still have the max width set at 100%, so you need to add !important to the rule to override.

    .page-id-4972 .wvrx-video {max-width:450px !important;}

    #25030
    annieb
    Participant

    I think I’ve managed to achieve what I was trying to do through using inline css as follows…

    <div class=”aligncenter” style=”max-width: 550px;”>my shortcode</div>

    Is there any reason why I shouldn’t use this?

    I don’t know why the other method wouldn’t work.

    #25031
    annieb
    Participant

    Just seen your post scrambler. I will try adding !important in the morning as it’s getting late here in the UK now.

    Cheers.

    #25032
    annieb
    Participant

    I tried adding !important but this still didn’t work so it looks as though I’ll have to continue using my inline css.

    #25033
    scrambler
    Moderator

    We can tell you what is wrong with your implementation if you put the CSS an post back.

    But you can also use your solution who does the same thing with just more code

    #25034
    annieb
    Participant

    I’ve put the css back as suggested and the post is at http://www.ambwebdesign.co.uk/wordpress/video-test/

    I see there’s a max-width in the source code below but I don’t know which file I need to go to in order to remove it or whether I can override it in my child theme’s style.css

    <div class=”wvrx-video wvrx-youtubestyle=”margin-left:auto;margin-right:auto;max-width:100%;“>etc.

    #25035
    scrambler
    Moderator

    you have to pay attention to syntax 🙂

    you used the bad syntax below

    .page-id-4972 .wvrx-video {max-width:450px; !important}

    instead of the proper one

    .page-id-4972 .wvrx-video {max-width:450px !important;}

    The !important needs to be with the property (separated by a space)  and before the semi colon

    #25036
    annieb
    Participant

    Oops. Thanks very much. I’ve got it now.

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