<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Extensions | Ben Hysa</title>
	<atom:link href="https://benhysa.me/projects/extensions/feed/" rel="self" type="application/rss+xml" />
	<link>https://benhysa.me</link>
	<description>Web Development</description>
	<lastBuildDate>Fri, 13 Dec 2024 21:11:58 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://benhysa.me/wp-content/uploads/2017/01/BH-Fav-150x150.png</url>
	<title>Extensions | Ben Hysa</title>
	<link>https://benhysa.me</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Devices Showcase</title>
		<link>https://benhysa.me/project/devices-showcase/</link>
		
		<dc:creator><![CDATA[Ben Hysa]]></dc:creator>
		<pubDate>Sun, 08 Dec 2024 18:19:30 +0000</pubDate>
				<guid isPermaLink="false">https://benhysa.me/?post_type=project&#038;p=7828</guid>

					<description><![CDATA[Devices Showcase chrome extension for resizing a website and putting it inside a chosen frame. Plus, a possibility to add temporary background image. ]]></description>
										<content:encoded><![CDATA[<div id="portfolio-post-page" class="et_pb_section et_pb_section_0 et_pb_with_background et_section_regular" data-padding="0px|0px|0px|0px" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_0 portfolio-post-block et_pb_row_fullwidth et_pb_equal_columns et_pb_gutters1">
				<div class="et_pb_column et_pb_column_1_4 et_pb_column_0 portfolio-post-block-col1  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_0 portfolio-post-title  et_pb_text_align_left et_pb_bg_layout_dark">
				
				
				
				
				<div class="et_pb_text_inner"><h1>Devices Showcase</h1>
<p>&nbsp;</p>
<p>Devices Showcase chrome extension for resizing a website and putting it inside a chosen frame. Plus, a possibility to add temporary background image. Currently options for Macbook, iPad and iPhone.</p>
<p>Public and can be downloaded on <a href="https://chromewebstore.google.com/detail/devices-showcase/njnjekcjbpphffolkpdnimcdffnkbekj" target="_blank" rel="noopener">Chrome Extension Store</a></p></div>
			</div><div class="et_pb_module et_pb_code et_pb_code_0 portfolio-post-buttons">
				
				
				
				
				<div class="et_pb_code_inner"><a href="https://benhysa.me/projects" class="portfolio-button">Other projects</a><a href="https://benhysa.me" class="portfolio-button">Back to Home</a></div>
			</div>
			</div><div class="et_pb_column et_pb_column_3_4 et_pb_column_1 portfolio-post-block-col2  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_video et_pb_video_0 et_animated">
				
				
				
				
				<div class="et_pb_video_box">
				<video controls>
					<source type="video/mp4" src="https://benhysa.me/wp-content/uploads/2024/12/Ben-Hysa-Device-Showcase-Extension-2.mp4" />
					
				</video></div>
				<div style="background-image:url(https://benhysa.me/wp-content/uploads/2024/12/Devices-Showcase-video-thumb.jpg)" class="et_pb_video_overlay"><div class="et_pb_video_overlay_hover"><a href="#" class="et_pb_video_play"></a></div></div>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>

<p><a href="https://benhysa.me/project/devices-showcase/">Source</a></p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Custom Video Controls</title>
		<link>https://benhysa.me/project/custom-video-controls/</link>
		
		<dc:creator><![CDATA[Ben Hysa]]></dc:creator>
		<pubDate>Tue, 03 Dec 2024 22:08:35 +0000</pubDate>
				<guid isPermaLink="false">https://benhysa.me/?post_type=project&#038;p=7760</guid>

					<description><![CDATA[Custom Video player controls done with javascript and scss. It can be used with various CMSs. All you need is to target the wrapper and the video element, and add your own scss color variables.]]></description>
										<content:encoded><![CDATA[<div id="portfolio-post-page" class="et_pb_section et_pb_section_1 et_pb_with_background et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_1 portfolio-post-block et_pb_row_fullwidth et_pb_equal_columns et_pb_gutters1">
				<div class="et_pb_column et_pb_column_1_4 et_pb_column_2 portfolio-post-block-col1  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_1 portfolio-post-title  et_pb_text_align_left et_pb_bg_layout_dark">
				
				
				
				
				<div class="et_pb_text_inner"><h1>Custom Video Controls</h1>
<p>&nbsp;</p>
<p>Custom Video player controls done with javascript and scss.</p>
<p>It can be used with various CMSs.<br />All you need is to target the wrapper and the video element, and add your own scss color variables. Further modifications are also possible, like repositioning control parts out of the video container etc&#8230;</p></div>
			</div><div class="et_pb_module et_pb_code et_pb_code_1 portfolio-post-buttons">
				
				
				
				
				<div class="et_pb_code_inner"><a href="https://benhysa.me/projects" class="portfolio-button">Other projects</a><a href="https://benhysa.me" class="portfolio-button">Back to Home</a></div>
			</div>
			</div><div class="et_pb_column et_pb_column_3_4 et_pb_column_3 portfolio-post-block-col2  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_code et_pb_code_2">
				
				
				
				
				<div class="et_pb_code_inner"><div class="ce_player">
       
<figure class="video-wrapper">
            <video class="player-video" preload="auto" playsinline width="1080" height="608">
<source type="video/mp4" src="https://benhysa.me/wp-content/uploads/2024/12/WordCamp-Europe-2025-Location-Video.mp4">
</video>

            <div class="player-controls">

                <button class="play-button-main">
                    <svg class="play-pause-icon"  xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 330 330">
                        <path class="play-icon" d="M37.728 328.12a14.994 14.994 0 0 0 15.222-.4l240-149.999a15 15 0 0 0 0-25.44L52.95 2.28A15 15 0 0 0 30 15v300a15.001 15.001 0 0 0 7.728 13.12z"/>
                        <g class="pause-icon">
                            <rect width="62.658" height="331.857" x="0" y="0" ry="15.097"></rect>
                            <rect width="62.658" height="331.857" x="210" y="0" ry="15.097"></rect>
                        </g>
                    </svg>
                </button>

                <div class="video-progress">
                    <progress class="progress-bar" value="0" min="0"></progress>
                    <input class="seek" value="0" min="0" type="range" step="1">
                    <div class="seek-tooltip">00:00</div>
                </div>

                <div class="time">
                    <time class="video-time-elapsed">00:00</time><span>/</span><time class="video-time-duration">00:00</time>
                </div>

                <div class="volume-controls">
                    <button class="volume-button">
                        <svg class="volume-icon"  xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24">
                            <path class="hidden" href="#volume-mute" d="M12 3.984v4.219l-2.109-2.109zM4.266 3l16.734 16.734-1.266 1.266-2.063-2.063q-1.547 1.313-3.656 1.828v-2.063q1.172-0.328 2.25-1.172l-4.266-4.266v6.75l-5.016-5.016h-3.984v-6h4.734l-4.734-4.734zM18.984 12q0-2.391-1.383-4.219t-3.586-2.484v-2.063q3.047 0.656 5.016 3.117t1.969 5.648q0 2.203-1.031 4.172l-1.5-1.547q0.516-1.266 0.516-2.625zM16.5 12q0 0.422-0.047 0.609l-2.438-2.438v-2.203q1.031 0.516 1.758 1.688t0.727 2.344z"></path>
                            <path class="hidden" href="#volume-low" d="M5.016 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6zM18.516 12q0 2.766-2.531 4.031v-8.063q1.031 0.516 1.781 1.711t0.75 2.32z"></path>         
                            <path href="#volume-high" class="" d="M14.016 3.234q3.047 0.656 5.016 3.117t1.969 5.648-1.969 5.648-5.016 3.117v-2.063q2.203-0.656 3.586-2.484t1.383-4.219-1.383-4.219-3.586-2.484v-2.063zM16.5 12q0 2.813-2.484 4.031v-8.063q1.031 0.516 1.758 1.688t0.727 2.344zM3 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6z"></path>
                        </svg>
                    </button>
                    <input class="video-volume" value="1" data-mute="0.5" type="range" max="1" min="0" step="0.01">
                </div>

                <button class="fullscreen-button" title="Enter Full screen">
                    <svg class="fullscreen-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <g class="fullscreen-icon-open">    
                            <path d="M0 16h3v8H0Z"/>
                            <path d="M8 21v3H0v-3ZM0 0h3v8H0Z"/>
                            <path d="M0 3V0h8v3zm16 21v-3h8v3z"/>
                            <path d="M21 16h3v8h-3Zm3-16v3h-8V0Z"/>
                            <path d="M21 0h3v8h-3z"/>
                        </g>
                        <g class="fullscreen-icon-close">  
                            <rect width="23.657" height="2.667" x="-11.883" y="15.698" transform="rotate(-45)"/>
                            <rect width="23.657" height="2.667" x="5.262" y="-1.337" transform="rotate(45)"/>
                        </g>
                    </svg>
                </button>

            </div>

            <button class="play-button-big">
                <svg class="play-pause-icon"  xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 330 330">
                    <path class="play-icon" d="M37.728 328.12a14.994 14.994 0 0 0 15.222-.4l240-149.999a15 15 0 0 0 0-25.44L52.95 2.28A15 15 0 0 0 30 15v300a15.001 15.001 0 0 0 7.728 13.12z"/>
                    <g class="pause-icon">
                        <rect width="62.658" height="331.857" x="0" y="0" ry="15.097"></rect>
                        <rect width="62.658" height="331.857" x="210" y="0" ry="15.097"></rect>
                    </g>
                </svg>
            </button>
            
            <img decoding="async" src="https://benhysa.me/wp-content/uploads/2024/12/WordCamp-Europe-2024.jpg" class="video-overlay">

        </figure>
</div></div>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>

<p><a href="https://benhysa.me/project/custom-video-controls/">Source</a></p>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
