0

So I've embedded a youtube video using oembed like this :

$embed_code = wp_oembed_get(get_field('youtube_video') );
echo $embed_code;

But how do i make it respond to screen size? viewing it on a mobile device, the width of the video is longer than the screen so i was thinking of putting it into a html <video> so i can control the size because putting it in a div isn't doing anything to it. But even using the video tag doesn't seem to work. I tried it like this:

<?php
    $video = wp_oembed_get( get_field('youtube_video') );
    echo '<div>';
    echo '<video width="500" controls>';
    echo '<source src= "'.$video.'" type="video/mp4">';
    echo '</video>';
    echo '</div>';
?> 

i forgot to add that the video doesn't actually get called. like the <video> html appears but the <source> doesn't seem to be working, like a broken link. could this be how i set up the custom field? as the type is set as text and called with oembed

does anyone have any pointers?

2

Welcome to WordPress StackExchange.

This is really an HTML/CSS question rather than a WordPress specific one, so you will have better luck getting a quick answer in the future by posting to another StackExchange site, such as Stack Overflow.

However, your issue should be fixed if you set a percent as the width, rather than hard coding in a value like the 500 shown in your snippet.

For instance,

<iframe width="100%" height="315" src="https://www.youtube.com/embed/yHfLyMAHrQE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Result: https://jsfiddle.net/qj6o4t23/

However, that will always fill 100% wide, so a better approach might be to have a max-width on it as well, which would mean using CSS rules instead of HTML attributes.

<iframe style="width:100%; max-width: 500px; height: 315px" src="https://www.youtube.com/embed/yHfLyMAHrQE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Result: https://jsfiddle.net/qj6o4t23/1/

With multiple rules like this, you're better off following the best practice of defining the styles in a CSS separately.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.