WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] Size of embedded videos on static page (6 posts)

  1. Gratianne
    Member
    Posted 9 months ago #

    Hi all,

    I've been struggling to find a solution to my problem :
    I put 2 videos next to each other on my home page (lower part, above footer) using a Word table. The first video is a Vimeo, and the other one is from Dailymotion.

    My problem is that even with the same settings, one is way bigger than the other.

    http://www.frenchlegendsrugby.com

    Here is my code :

    <table border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td style="text-align: left;" valign="top" width="307"><a href="http://vimeo.com/72336455">Beach Rugby à Saint-Palais-sur-mer, le 2 août 2013</a><iframe src="//player.vimeo.com/video/72336455?color=ffffff" height="437" width="437" allowfullscreen="" frameborder="0"></iframe></td>
    <td style="text-align: left;" valign="top" width="307"><a href="http://www.dailymotion.com/video/xy3kea_match-des-legendes-robert-pires_sport?search_algo=2">British & Irish Vs French Legends, Londres, le 22 février 2013</a><iframe src="http://www.dailymotion.com/embed/video/xy3kea?logo=on&highlight=120172" height="435" width="435" frameborder="0"></iframe></td>
    </tr>
    </tbody>
    </table>

    Can anyone help me to get the 2 videos to be the same size???

    Thanks in advance

    [Moderator Note: Please ensure that you are embedding links correctly in your posts.]

  2. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Using a Word table is horrible coding practice...I'd suggest using divs and CSS.

    That said, this CSS is affecting that video size:

    .fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed {
        height: 50%;
        left: 0;
        position: absolute;
        top: 0;
        width: 50%;
    }
  3. Gratianne
    Member
    Posted 9 months ago #

    Thanks for the reply WPyogi.
    I've just added your CSS code to my Custom CSS and it didn't change anything. Where did I go wrong?

    I'm sorry but I'm quite the beginner...

  4. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    That code I posted is CAUSING that video to be reduced to 50%. Start by removing that Word table - as you can see (try resizing the browser), tables don't work well at all on responsive sites.

    Try this instead - using the TEXT editor:

    <div class="video-div">
       put your video code in here
    </div>
    
    <div class="video-div">
       put your second video code in here
    </div>

    Then add this to custom CSS:

    .vido-div {
        float: left;
        width: 45%;
        min-width: 400px;
        margin: 5px;
    }

    That's a starting point - let's see how it looks.

  5. Gratianne
    Member
    Posted 9 months ago #

    Thank you so much !!
    I indeed had this code in my Custom CSS and now that it's gone the videos have the same size.

    I have to confess that now that it's looking good I'm a bit concerned about taking away the table but I'm going to try anyway.

    Thanks again!!

  6. Gratianne
    Member
    Posted 9 months ago #

    WPyogi : sorry to be a pain, but I just tried the "div class" technique and unfortunately the second video gets huge (full screen) so I went back to the table for now...

    Do you have any idea why it's not working as it should?

    Thanks again for your help

Reply

You must log in to post.

About this Theme

About this Topic