I am currently using the mPurpose-master bootstrap theme, which offers a feature allowing the placement of 3 blocks in a row that are fully responsive.
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
DATA ONE
</div>
<div class="col-md-4 col-sm-6">
DATA TWO
</div>
<div class="col-md-4 col-sm-6">
DATA THREE
</div>
</div>
</div>
</div>
I would like to make modifications to this layout by placing a video in the center of the screen/row while maintaining responsiveness. I attempted the following code, leaving the first and third div empty and placing the video in the second div:
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
</div>
<div class="col-md-4 col-sm-6">
<video controls autoplay height="340" width="267">
<source src="<? echo $video_link;?>" type="video/mp4">
</video>
</div>
<div class="col-md-4 col-sm-6">
</div>
</div>
</div>
</div>
The above code works well, but if the dimensions of the video are adjusted, it loses its responsiveness.
Another approach I tried is as follows:
<div class="container">
<div class="row">
<div class="col-md-6">
<video controls autoplay>
<source src="<? echo $video_link;?>" type="video/mp4">
</video>
</div>
</div>
</div>
This method positions the video to the left and does not maintain responsiveness.
Currently, the video size is too small. I have three main objectives:
1) Increase the video size to 640*360.
2) Center the video on the screen.
3) Ensure responsiveness.