وضع فيديو على شاشة حاسب ؟

مرحبا عبد الواحد،

هذه فقط عبارة عن صورة مفرغة تم تنسيق إطار مشغل الفيديو ليكون بهذا الشكل.

تحتاج فقط HTML - CSS

يمكنك استخدام الشيفرة التالية:

حيث نضع الصورة كخلفية لعنصر div وهو يعرض الفيديو في جزء منه (نبتعد عن الحواف)

<div id="tv_container">
    <video width="320" height="240">
        <source src="video/video.mp4" type="video/mp4" />
    </video>
</div>

<style>
#tv_container {
    background: url('images/tv.png') no-repeat top left transparent;
    width: 400px; /* Adjust TV image width */
    height: 300px; /* Adjust TV image height */
    position: relative;
}
#tv_container video {
    position: absolute;
    top: 30px; /* Adjust top position */
    left: 40px; /* Adjust left position */
}
</style>

أو:

في حال تريد وضع الصورة فوق الفيديو (يجب أن تكون الصورة شفافة transparent و من نوع png)

<div id="tv_container">
    <video width="320" height="240">
        <source src="video/video.mp4" type="video/mp4" />
    </video>
</div>

<style>
#tv_container {
    width: 400px; /* Adjust TV image width */
    height: 300px; /* Adjust TV image height */
    position: relative;
}
#tv_container:after {
    content: '';
    display: block;
    background: url('images/tv.png') no-repeat top left transparent;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 10;
}
#tv_container video {
    position: absolute;
    top: 30px; /* Adjust top position */
    left: 40px; /* Adjust left position */
    z-index: 5;
}
</style>

بالتوفيق