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>';
?> 

does anyone have any pointers?

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?