How to make an embeded a Youtube video from custom field text responsive to screen size?

Question

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?

Answer 1

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.

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  

<div class="embed-responsive embed-responsive-16by9">

    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/8AgWJvjs0rY"></iframe>

</div>