Enhanced Functionality:
To elevate user experience, I have implemented a feature where clicking on the video will toggle it to full-screen mode and then revert back to its original size upon another click. The initial video container's CSS style is defined as follows:
<div id="Journal_Video" style="position:absolute; left: 120px; top: 180px;" class="jp-video jp-video-750p" role="application" aria-label="media player"></div>Successful Implementation:
I have successfully programmed the video to expand and restore to its original dimensions.
Below is the code snippet for your reference:
<script>
//Journal Video
$("#Journal_Video").jPlayer({
ready: function() {
var self = this;
var fullScreen = $(self).jPlayer("option", "fullScreen");
$(this).jPlayer("setMedia", {
m4v: "https://www.youtube.com/embed/YE7VzlLtp-4"
}).jPlayer("play");
$(".jp-jplayer video").click(function() {
if (fullScreen = !fullScreen) {
$("#Journal_Video").css({
"top": "0",
"left": "0"
});
$(self).jPlayer("option", {
"fullScreen": fullScreen
});
} else if (fullScreen == fullScreen) {
$(self).jPlayer("option", {
"fullScreen": false
});
$("#Journal_Video").css({
"top": "180",
"left": "120"
});
}
});
},
swfPath: "javascript",
supplied: "webmv, ogv, m4v",
loop: true,
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
sizeFull: {
top: 0,
cssClass: "jp-video-750p",
},
size: {
width: 1200,
height: 750
}
});
$("#Journal_Video").show();
</script>
<div id="Journal_Video" style="position:absolute; left: 120px; top: 180px;" class="jp-video jp-video-750p" role="application" aria-label="media player"></div>
Potential Issue:
The CSS styling adjustment at
else if (fullScreen == fullScreen) {...}$("#Journal_Video").css({
"top": "180",
"left": "120"
});
does not seem to execute when the full-screen video is reverted back to its original state by the user.
This baffling discrepancy has me seeking assistance with resolving this matter.